利用继承修改vue组件,解决el-table中max-height为比例值的滚动问
大家有没有发现
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改成
因为他默认是
他会自动缩小弗莱克斯是硬克等于
好这样就没有问题了