程序员小山与Bug
抖音bilibiliGitHubSource
  • 简介
  • 有点迫不及待的分享:日常cursor开挂的效果
  • DataEase桌面版体验全过程
  • 憋了几天想了个新域名,方便大家记住!另外支持昵称了
  • 局域网传输工具在部分内网环境无法建立WebRTC连接
  • 来的时候好好的,回不去了:vue打包后路由异常
  • 小伙伴投稿:ElementUI日期时间范围组件动态设置默认时间
  • cursor美化网页体验一下
  • 基于WebRTC开源纯html局域网传输网页工具部署方式
  • 第一次用cursor解决问题全过程
  • 小伙伴投稿:vue2加了属性丢了样式
  • 分享一个网页版局域网文字文件传输工具
  • 控制台输出对象的属性要再点一下才看到值?
  • 事件穿透在小程序无效导致的神奇bug
  • eltable浮动列里refs失效
  • 自己写的烂代码
  • CodeGeeX新活动和新功能体验:项目地图、幽灵注释、workspace
  • 神奇的split()
  • 防踩坑:双竖线引发的低级bug
  • 一个异步问题导致的小bug
  • 快速幂取模
  • 二进制那点事儿之取模和整除
  • 二进制那点事儿之换算十进制的理解
  • 分享一款Windows服务注册工具、配合Jar包讲解.srt
  • 3分钟带你体验MaxKB,纯纯一个老员工的样子
  • 分享一个在代理层中开发的神器,再配合推送工具发挥你的想象!
  • keyframes在safari下弄不好就会抖动?
  • 分享一个小工具类(思路)解决swagger文档的小痛点
  • 第一次体验到important在css里真的有用
  • 一个困扰十多年的css问题即将被解决啦
  • 记一次IDEA异常断点的使用场景,真香!
  • 监听or预警第三方程序的另一个思路
  • 小伙伴的提问{}+1是咋回事
  • RemoteAddress为什么是127.0.0.1
  • InlineChat终于可以Inline了
  • 抢先体验CopilotWorkSpace
  • 利用1Panel搭建免费https个人网站全过程
  • 唬人版的短信验证码
  • ONLYOFFICE协作空间私服来了
  • 日常使用CodeGeex编程外挂的几个场景
  • 注释代码竟然编译出病毒
  • 从0搭建体验JumpServer堡垒机全过程
  • CodeGeex又又又升级了,再分享几个日常的小案例
  • 【alfred插件】指定尺寸随机生成测试图片到桌面
  • 简单但烧脑的跳转bug,一定要耐心看完
  • 分享一个强大的大屏仪表系统DataEase
  • 从购买开始,10分钟演示部署网站全过程。收藏备用!
  • windows下的php-cgi自动崩溃?
  • 慎用justify-content等于center
  • align-items的stretch神奇的不管用
  • 跟GPT打配合偷懒小日常
  • 你们要的截图软件来啦
  • vue2+ElementUI碰到zoom后部分组件错位的问题
  • 好消息:VSCode在1.85.0更新中解决了3个历史痛点
  • 分享一个管道进度监控小工具顺便回答一个上期评论区的问题
  • 一次\r引发的输出异常
  • 记一次诡异的控制台报错
  • 深度解读chrome浏览器对资源文件的缓存规则
  • 小伙伴一个大胆的想法写出创意的组件,但又碰见无奈的bug
  • 新学到一个圆角的写法,现学现卖了
  • 至今写程序还不开外挂的同学一定要试试
  • 接上集-双远端库合并发行版&命令提示插件
  • 久等的vue3版element组件修改二开全过程终于来了
  • (接上期)ONLYOFFICE搭建过程
  • 一款支持私有化部署的宝藏办公套件ONLYOFFICE
  • 当程序员多好玩:表格自带的tooltip总跑?看我怎么破!
  • 才发现chrome的开发者工具原来还有个功能叫Logpoint
  • form标签导致点击button页面被清空
  • 跳页组件的光标串了,没想到是chrome对原生文本框就有bug
  • 耗费4小时整理了9个前端经典问题
  • 才发现:一直没当回事的终端版Copilot还可以
  • 趣思路:根据文件结构自动生成router.js
  • 太爽了,用chatGPT处理数据真的丝滑啊!
  • 网页的PWA安装按钮迟迟不出来
  • JsonEditor失效的解决方案来啦
  • 解决:IDEA最近有时候双击shift搜索会比较慢
  • eltable行高变化后,丢失滚动条排查解决全过程
  • 分享:一个写alfred常用的代码段
  • 分享:字体抽取小工具&一款免费商用的字体
  • CodeGeex问答模式可以薅无限制问答次数了
  • 新发现了2个VSCode高对比度皮肤的优化配置
  • el-dialog、el-drawer里拖拽出总是会自动关闭的问题(下集)
  • el-dialog、el-drawer里拖拽出总是会自动关闭的问题(上集)
  • 我的视频封面制作全过程
  • 悬浮到菜单上莫名多出滚动条
  • 自己给vue2.0第三方组件库打补丁的一种方法
  • csdn免登陆复制脚本有升级,代码片段关注后续更新
  • 一次改bug提PR的全过程,交作业啦
  • ChatGPT辅助编程的场景之提炼sql
  • 1024bugs找视频&gitbook在测试的ai搜索很好玩
  • 不想买copilot的小伙伴可以试试这个
  • 分享一个公用的方法用来让el-table滚动到指定行的方法
  • 小伙伴提的问题让我重新认识了nth-child
  • 可以跟随文字方向设置的宽高css属性
  • v-drag指令忽略margin导致的bug
  • 一个vite的页面每次刷新的效果不一样
  • 其他元素的点击事件总是优先与blur事件触发
  • 改造el-tag动态编辑标签,支持自动提示(上)
  • 新版Chrome开发者工具里偶尔复制的内容会错位
  • Mac系统的双指缩放总是失灵,顺便安利AppleScript
  • 特殊需求ELDatePicker不要input框怎么处理
  • 以后脏活累活也可以丢给ChatGPT了
  • 给假进度条fake数据的一个类库
  • css里给多个词语加逗号的一个方法
  • 你们要的chrome查找已知代码调试的方法来了
  • copilot问答模式的2个小场景,大家都是怎么用的呢?
  • 为什么el-table碰到缺失字段的情况排序会乱
  • 排查小伙伴的菜单项抖动问题,顺便分享一个chrome对比样式的小插件
  • ChatGPT给数据库表生成测试数据,3.5vs4.0
  • 大家都怎么用ChatGPT辅助编程啊?我想做个系列视频
  • flex常见的一个bug:部分区域无法触发popover关闭
  • 发现一个ElementUI中隐藏的巨好用的指令
  • copilot问答模式很好玩儿呀
  • Mac剪切板历史工具
  • 前两天单位的mongo-docker突然无法启动了
  • Alfred默认关闭的功能:输入一半的命令可以保留5分钟
  • 自定义一个指令解决部分组件没有scopeid的问题
  • 分享一个popover弹出层过渡动画效果
  • 你被vscode的这个小特性困扰过吗?
  • eltooltip错位的一个解决方法
  • 分享一个金额展示组件的升级版
  • zoom引发的tooltip错位
  • fixed定位的一些特例我们需要知道了才能避开一些bug
  • vue2点击跳转elementui源码插件和另一件小事儿
  • el-cascade限制选中数量(续)
  • el-cascader如何修改限制选中数量
  • 解决日期组件周模式无法设置valueFormat的问题
  • 分享一个可以自动检测是否出现省略号的vue指令
  • 记一次临时改变样式禁用滚动条引发的bug
  • 分享一个简单的基于ElemenUI封装的全局公用的图片预览组件
  • 分享一个带娃练习拼音的工具和一段vue长按指令
  • translateY过渡动画导致的多出滚动条
  • img-icon导致按钮不对齐的原因分析
  • 究竟vertical-align:middle的依据在哪里
  • 新版VSCode终端视图配合iTerm中文乱码了
  • 到底为什么用img标签实现icon的时候经常对不齐文字
  • 如何利用Aflred插件提取选中文件的内容并做一些文字处理
  • 间隙处点击续(另一个巧妙的方法)
  • 高z-index的容器空白处点击事件被吸收的问题处理
  • vue指令快速拖拽效果,额外附加3个小功能
  • 部分情况下,使用100vw和100%的区别
  • el-table同时开启固定列和展开行时,水平滚动的内容截断问题
  • 复制flex布局内的文字出现的多余换行问题
  • ElementUI新上线了一个组件很实用
  • Vue中动态class覆盖原生class的问题
  • el-table每行下面实现进度条的效果封装全过程完整版
  • 给table每一行下面增加进度条功能的思路
  • justify-content垂直居中,缩小容器后顶部丢失的bug
  • 给老粉准备的工具:按字幕检索我的视频
  • 是否复用VNode依据?源码中sameVnode方法逻辑
  • 浏览器对移动端手指touch优化产生的神奇的bug
  • 继上次max-height代替height做过渡动画的后续
  • 浅析VueJs中data数据新增属性后视图不更新的底层原因
  • css里transition不支持height为自适应的解决思路
  • elTooltip莫名错位的bug原因及解决方案
  • 推荐一个实现设计稿的时候,遇到很多小icon的解决方案
  • 今天遇到的vue项目开发是一保存就异常终止的问题
  • 强大的AppleScript_顺便解决一个bug
  • 定位“解决spring-cloud-config丢属性问题关键代码”的过程总结
  • 利用解决spring-cloud-config莫名丢属性的问题了解各版本的发行过程
  • flex-grow竟然支持动画过渡,用在全屏的折叠面板刚刚好
  • scrollHeight为什么两次不一致
  • 分享3个配合MenubarX的实用工具
  • 分享一个_scopeId的使用场景
  • 详解:el-button的disabled神奇不生效问题
  • el-button的disabled神奇不生效问题
  • vue组件如何实现任意css属性的动态设置
  • vue2组件嵌套的时候什么情况下scoped会失效以及怎么解决
  • 分享一段简洁的css来快速实现抖动提醒
  • 同样是100%大小,换成canvas就会多出滚动条
  • 跟评论区新学的1个非常好用的快捷键,后面举了一个js里面的应用
  • 神奇日文导致的图片在windows里面不显示的问题
  • 推荐一个货币计算&格式换的轻量级类库,耐心看后面的小技巧哈
  • offsetLeft引发的瀑布流错乱
  • el-select实现自适应宽度(思路可用于原生input自适应宽度)
  • 圆角导致的奇怪的“边框”
  • iTerm如何显示执行命令的时间
  • color拾取后输入法切换不了的Bug
  • el-table固定表头滚动时,表头不跟手抖动的问题
  • Alfred插件解决复制行内样式家换行的问题
  • $msgBox配合$createElement产生的双向绑定问题
  • 并发场景下saveOrUpdate导致的更新“不成功”的bug
  • HTML快速实现平滑滚动效果
  • Java里简单快速实现并行操作
  • 新版VSCode隐藏功能
  • JS新手常见bug:新节点的事件问题&mouseout和mouseleave的区别
  • el-date-picker自定义文字&copilot太爽了
  • ElementUI最新版使用el-date-picker报警告的问题
  • CSS实现多个容器保持相同宽度
  • VSCode插件:嵌套注释
  • css设置宽高比
  • 分页打印el-table时如何为每一页增加表头
  • 跨页打印table被截断怎么办
  • 好用的focus-within伪样式,顺便再提一嘴copilot
  • React下elementui的AutoComplete错位问题
  • React里eltable自己变小的bug排查全过程
  • foreach区别对待Array和Set
  • el-select下拉错位(下)
  • el-select下拉错位(中)
  • el-select下拉错位(上)
  • Tab栏续集&滑动卡片组件
  • 自己会跑的Tab栏
  • 巧用取模实现轮询效果
  • 多出的滚动条
  • 等号引发数组被清空的bug
  • MonacoEditor光标问题debug全过程
  • idea新ui申请试用&抢先体验的方法
  • 超时效果工具类的一个使用场景
  • Java工具类实现类似“超时”的效果
  • Mac终端里的pbcopy命令
  • Java中支持链式调用的数字工具类
  • 利用Alfred给文本段前面加序号
  • JetBrains号称的下一代开发工具Fleet预览版体验
  • DataGrip数据库管理工具推荐
  • vue.data页面级暂存实现
  • Java中小于号执行顺序
  • 剪映局部放大教程来啦
  • 全局快捷键打开iTerm
  • Console.log不准的问题
  • 利用chrome的“其他个人资料”实现同一个网站同时登录多用户
  • 数字id太长导致删除&更新失败
  • Alfred写周报有升级外加一个clone插件
  • React网站用脚本填写文本框不生效
  • 临时有感聊聊注释&变量名
  • Alfred周报小工具
  • MySQL正则不支持-d和大小写的问题
  • 切换抖动续集
  • iterm快速cd到某个ls结果目录的方法
  • 问题排查:切换页面时position_fixed会抖动
  • Chrome的DevTools调试动画偶尔失效的问题排查
  • Alfred代码段开启自动上屏配置的使用体验
  • 页面抖动调试过程
  • css高度百分比悖论问题
  • Java空指针异常的底层逻辑
  • VSCode上下分屏太适合写Vue了
  • 利用继承修改vue组件,解决el-table中max-height为比例值的滚动问
  • win系统利用环境变量运行“一切”
  • AI代码提示-copilot在idea里的使用效果
  • copilot使用体验,神奇的代码提示
  • 一款编辑Json的Chrome离线插件
  • 莫名抖动的调试过程(完整版)
  • Alfred写个插件处理curl
  • Vue网站书签栏脚本小技巧
  • VSCode何时打开新Tab
  • windows系统中配置自己写的程序到右键菜单
  • chrome开发者工具$0的用途
  • 编辑器列选择模式的两个场景
  • float超高导致神奇的错行问题
  • chrome开发者抓包工具copy-cURL的一个使用场景
  • SpringBoot特定场景下使用DevTools导致的bug
  • HTML缩放的缝隙
  • GitHub一键切换网页版vscode在线编辑
  • Mac工具Alfred小技巧
  • 自适应flex-item内英文自动折行后的宽度问题
  • java里Object.notify()方法的作用
  • Promise.resolve()使用场景(执行顺序续集)
  • 3个IDEA小技巧
  • Chrome自动播放策略
  • 巧用Promise处理执行顺序
  • Java封装同步锁(二次翻车后续)
  • Java封装同步锁(翻车后续)
  • Java封装同步锁(完整版)
  • Alfred获取本机IP插件
  • chrome隐藏的策略
  • 真心推荐3个alfred插件
  • 利用浏览器收藏夹给网站扩展新功能(续)
  • 迟到的阴影(iOS_SwiftUI)
  • 图片下的缝隙(续)
  • 正则提升效率小用途
  • 神奇的缝隙(CSS图片篇)
  • iOS动画debug(SwiftUI)
  • css里background-no-repeat不生效
  • chrome快速禁用Javascript
  • 贡献源码全过程(下集)
  • 贡献源码全过程(上集)
  • 覆盖java类改造jar包
  • el-table自定义滚动条大小后出现错位
  • 类似笔记本的自适应内容通体下划线
  • debug按钮样式异常「完整版」
  • vscode高对比度皮肤优化
  • 解决flex动态高度问题
  • 利用浏览器收藏夹给网站扩展新功能
  • 分享终端优化&工具配色方案
  • 如何伪装邮件服务接收数据
  • 在chrome浏览器里仅复制域名
  • 《放大镜后移》改造组件-完整版
  • 推荐一整套试用各种软件的皮肤
  • 《滚动不到底》debug完整版
  • 搜狗输入法极简皮肤
  • nodeJs随机生成国内地址
  • iterm打开时卡顿
  • sql查询子表状态全部完成的数据
  • ElementUI全局配置z-index
  • el-table配合flex布局时不缩小
  • css实现深色模式
  • 网页自适应
  • iterm、oh_my_zsh粘贴特别卡
  • 利用文本域填充剩余空间
  • css变量引发的bug
  • 传输文件中最后DONE文件的作用
  • 到底为啥ssh会自己断开
  • 真心推荐几个程序员的小工具
  • 仿朋友圈布局:1~9宫格css自适应
  • nodejs强大的类库:控制台交互
由 GitBook 提供支持
在本页

这有帮助吗?

利用继承修改vue组件,解决el-table中max-height为比例值的滚动问

上一页VSCode上下分屏太适合写Vue了下一页win系统利用环境变量运行“一切”

最后更新于2年前

这有帮助吗?

大家有没有发现

el-table 的 max-height 不能设百分比

包括 vh 他的一定情况下都有问题

我们来看一下哈我们拿 vh 先来举例子

现在这个高度就是50 vh

这高度没问题

但是呢

他下边还有数据我们看不到了

因为他没法滚动了

但同样是50vh

我们换成

height

大家看这就可以滚动了

所以呢很奇怪

我们先来看一下

他现在滚动的这个是哪一个 div

我们来看一下这个

这个的高度现在是

然后呢他内层的高度是1,

我们先来看一下他的

scroll-top

大家看 551 我稍微滚动一点

再看

说明我们现在滚动的就是这个层

这个层自身只有160像素

但是它里边的内容比较高

1,420像素

所以他就有滚动的效果

但是如果我们把它改成 max-height

大家看这个层就不是160了

他就跟里边一样高了

所以他就不能滚动了

那我们把它再加一个高度哈

哎! px

大家看,这样就可以滚动了

那为什么我们用 max-height 的时候

他就没有高度呢

这个我们一会再说

我们先来分析一下他为什么会要

有这个 div

我之前可能也说过哈

就是el-table

他为了实现这种表头的固定他会在

组件里边会画几个 div

一个是表头放在这

然后呢还有一个就是

表格的主体内容

然后我们滚动的时候呢

他是在主体内容里边

去做这个上下的滚动

这样来实现这个表头的浮动的效果

我们设的那个max-height是针对谁呢

是针对整个这个表表格的

全部的高度也就是说

他组件内部还要计算表头有多高

然后下边减掉表头

让他填充剩余的空间

所以呢

就导致他需要把下边设置一个高度

那他为什么就没设置上呢

我们先来翻一下代码

我们搜一下这个啊

搜的时候可能第一次搜他找不到

我们把这个排除文件打开

这样他可以搜到 node_modules 里的文件

然后呢我们找到这个

table.vue

大家看,就这个层

这个层他有一个 style

然后bodyHeight

我们看一下bodyHeight

这是一个计算方法

然后 bodyHeight() 怎么写的呢

大家看,首先呢解构了几个对象(1个对象的几个属性)

我们先不管他这个不重要

然后他这判断用户是设置了 height

还是设置了 max height

如果设置了 height 呢

他就直接设置一个 height 的样式

大概这个 body height 肯定就是刚才那个

然后如果用户设置的是 max height

这时候他怎么处理的呢

他会把用户设置个 max height 做一个

格式化嗯

这个 pass height 怎么写呢看一下

大家看

height 是不是 number

如果是 number 呢他直接返回

如果不是的话呢

他会判断是不是以 px 结尾

大家看如果不是 px 结尾的话呢

他就原封不动返回了就是你写的50vh

他就返回了一个50vh

好我们继续看

我们这个地方拿到的就是50vh

然后他又判断50vh是不是number(类型)

那肯定不是

不是的话呢整个这个 if 都不走了

最终什么样式也没有

所以他就没有设置这个大小

包括百分比他都不会再设置了

那既然不设置

他就不会出现滚动条对吧

好那想到这呢我们可能

很多同学跟我一样

第一想法就是那既然它不支持

我们自己在这计算吧

我们最终返回一个这样的呗

clc 然后呢比如说50位置

减去他要计算的那些高度

就是他在这不是做了减减法吗

我把这些高度都拿过来计算一遍

在这减这种方法

在 vh 的情况下没有任何问题

效果特别好

但是放成了百分比就有问题了

那具体的原因哈

由于时间关系

我打算把它单出一期视频

我们先不管他为什么

就知道用百分比的情况下

这种方法是不可行的

所以呢我们要考虑其他的方法

什么方法呢

我们来看这个demo

这是一个特别简单的外层

然后里层两个容器我模拟了一下

现在呢就是这个样子

看看表头表数据

我们现在要用

flex 布局来实现这种效果的话

就特别简单

因为表头固定

然后让下边自动填充

剩余的空间就可以了

对吧

而且他有一个好处就是即使

el-table 组件给他

下边的表数据设置了一个高度

我可以让他不生效

我们来看一下

现在是flex布局

然后呢

方向是纵向的

好接下来呢

我把这个

加一个flex-grow

对吧?让他自动填充剩余的空间

大家看一下他就自动填充了

但是呢我们要注意

我们要想着把表头

flex-shrink改成

因为他默认是

他会自动缩小弗莱克斯是硬克等于

好这样就没有问题了

大家看而且好就好在刚才我说的

el-table给设的这个高度已经失效了

他完全遵循这个flex-grow了

好

那我们回过头来再来改刚才这个demo

我们想办法先把外边 table

改成 flex 布局

display 等于 flex

好现在布局乱了

因为他默认是横向布局的

我们把 flex direction 改成 column

改成 column 以后大家注意看

上面的表头没了

为什么呢就是因为它 shrink

它自动缩小了

我们把 flex

shrink改成

大家看!表头出来了

然后呢我们再把它下边 body-wapper

把这个

flax-grow:1 挑出来

好这样的话呢就可以了

但是哈还没完

我们先把这个样式先写出来(在项目里)

回到这个项目

我们写个 style

然后呢这里边我们

.el-table

display 等于 flex

好我们先来看一下

我们先把 column 去掉看它乱不乱

大家看乱了(说明样式生效了)

我们再把column加上

说明现在是column布局了

而且他现在表头没了

注意看

所以呢我们要把表头加上

.el-table

然后呢 flex-shrink:

刷新

嗯

啊!这块得用穿透

好大家看有了

(关于这个穿透的东西...

... 我之前有一个视频的合集 ...

...大家不懂可以去看哈) ok

我们再往下

再把那个

grow加上, body-wrapper 哎这有了

把这个 flex:1 加上

其实 flex:

就相当于把shrink和grow一起设置了

我们单独设置吧

这个都行其实 ok

看上去可以了哈

但有一种情况他会出问题

就是如果这个表格出现固定列

比如说我现在把它弄窄一点儿

三百像素

然后呢我让第一列出现固定的效果 fixed

大家看在滚动的时候

他前面这一列就不滚动了

所以呢这是我们要解决的第二个问题

怎么解决呢

我们先来看一下原因

跟那个刚才的类似

他这有一个 fix-body-wrapper

他这个层现在是没有(设置)高度的 (导致里外一样高)

其实我们要把这个层设置高度

也是可以滚动了

比如说我们给他设一个

随便设一个(先)

大家看他就可以滚动了

所以呢我们要找到(源码)里找到这个

注意看这他有一个 fixedBodyHeight 这个样式在 style 里

我们看一下这个

那关于这个 height

跟刚才的写法其实我们刚才看过了

算法其实类似

我们现在需要在这加一个 else

就是他不是 number 的时候呢

要else if

判断他是不是 vh 或者百分比哈

所以这块

我们直接在这改肯定是不行的

他不走

那怎么办呢我们只能自己

搞一个组件来继承这个

把它覆盖掉!好

我们新建一个组件

components 新建一个 el-table2.vue

然后这里边呢就 script

然后 ...

这里比较简单啊我们exttends继承

继承是什么呢

import 呢把刚才那个

table 导进来

然后呢这块

table导进来

继承的退保

这样这个组件就完事了啊

一会我们再写覆盖的方法

我先把这个组件导到main.js里边

先把它导进来

嗯我先复制一下刚才那个组件的地址

好然后呢我们起个名叫 ELTable

然后呢

然后我们在项目里再用的时候

就把这改一下

就用2 我们先来看一下可不可以

好没问题

没问题以后呢

说明他现在用的是我们这个2了

然后

我们再把他的刚才这个方法拿过来

fixedBodyHeight

他是在一个计算属性里

所以呢 computed

这个方法

这个方法我们没有

我们还得把这个导一下

parseHeight

在这

在这个util里边

那我们也把它导一下

嗯(element)我把这个复制一下地址吧

util

copy相对路径

粘过来

从element-ui开始

好

然后这样的话呢我们也有这个方法了

这回呢我们在这

console.log一下

看看走不走

大家看走了对吧

那接下来呢就是我们要把这个改造了

那就简单了

我们

在这加个判断

else if 然后呢 maxHeight

判断一下 match

\d 是不是数字加

vh呗

vh 或者 %

如果是的话走这里

那这里边怎么处理呢

我们按照他这个算法算一下

我们怎么写呢

这个高度很容易计算

注意看因为他现在是一个

position 等于 absolute

大家看!absolute

所以呢他会找到外层的

非 static 元素的

容器作为锚定 大家看

就这个容器

那这个容器现在有多高呢

这个容器

就是

整个这个el-table的高度

也就是说对于他下边这一小块

就这一小块的话

如果你写百分之百

就是整个table的高度

然后你去减剩余的高度就可以了

所以呢

这块我们其实是用不到maxHeight了

我们把它改成百分之百就行

声明个变量 let

比如说 resHeight

等于

什么呢等于他判断了一下大家看

我把这判断先拿过来

其实我们就把maxHeight

改成百分之百就行

把这一块改成

百分之百

同理呢

啊百分之百减去他

那那这块应该是这样写

(这个删掉)

嗯

百分之百

减去

这个我们把它拼成一个字母串

这样写

然后否则的话呢就是百分之百

然后再往下

他判断这个我们也是把它拿过来

还是 resHeight

减等于… 他也是要减去嘛 对吧!我们还是

我让他等于

他这样

他自身继续减去这个

啊对了要加 px

这个要加 px

ok 这实现了刚才那个减等于的效果

再往后这个一样

他没有判断直接减等于

那我们也是等于

减去这个

出来就这 px

最后呢我们把它

返回这块就

单位了

maxHeight注意

我们要给他拼接上什么

calc

好我们来试一下啊刷新

然后呢我们滚动一点

找到这个类往上

不对 50vh

啊错了

这块应该用这个错了 sorry

我们再刷新一下

稍微滚动一点看一下

这个就对了

100减去0减48减0啊这些无所谓

反正他效果是可以的打开

ok 那这样的话呢

我们以后也可以把这个样式拿进来

就我们刚才写的这个样式

大家看

没有问题

ok 以后的话我们再使用

(max-height是比例值的)el-table就可以加一个

大家看!把它去掉

滚动不了了

有问题了

这样左右能滚动但上下滚动不了了

但是呢如果我们加一个

相当于我们

把一些东西给重新覆盖重写了

这样的话就可以了

https://v.douyin.com/rjCs5AS/
Logo