eltable行高变化后，丢失滚动条排查解决全过程
demo：
https://sunzsh.github.io/vue-demos/#/el-table-scroll
源码：
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/el-table-scroll.vue
大家看这小伙伴的问题
我已经把他代码放到这个demo里了
什么意思呢
就是比如正常情况下
我们在这个固定高度的el-table里边
新增一行
新增一行的
超出表格的时候他就会出现滚动条
但是呢注意我刷新一下
如果我就增加两行
然后呢（这时候还没有中间滚动条对吧）
我不加了
我是在这多选几个选项
大家注意看第一行就被称高了对吧
但是呢
bug就出现了
它没有出现滚动条
导致我现在已经滚动不到第二行了（Mac没有这个问题）
那怎么处理这个问题呢
我们首先来判断一下
它这滚动条是怎么出来的
大家看啊
我们找到这个el-table
就这个el-table
现在呢大家注意是这个样式
但是呢如果我再新增一行儿
大家看这里边多出一个el-table-scrollable-y
我把这个属性（class名称）先复制一下
然后啊咱们再刷新一下
然后还是刚才那个操作加两行
然后多选几个选项把它撑高
这时候没有出现滚动条对吧
好我们手动给这个el-table
加一个这个样式
大家注意在这里
粘贴回车打开滚动条就有了
也就是说
重点就在于这个eltable-scrollable-y
为什么没有出现
对吧
我们先来看一下el-table源码哈
我们点进去
大家看，这里就有一个el-table-scrollable-y了
所以重点就是这个变量
那这个变量怎么来的呢
我们在这里全文搜是没有（为其）赋值的
只有取值哈
所以呢我们重点看layout
layout怎么来的
我们搜一下
大家这有一个layout new了一个table layout
所以呢我们向上查找
在这里我们进到这个table layout里面啊
table layout
然后呢我们在这里去搜看
刚才用到的这
scrollY 我们看在这里他什么时候赋的值
这个不算
scrollY
大家看 在这里
scrollY等于... 他就做了个计算
是否出现这个纵向滚动条
然后呢其实这个方法
我们再去搜看
这里哪里在调用这个方法
这有一个
这是声明
这回来了
所以也就这一个地方在调用scrollY
什么地方呢
这个update elsHeight
然后我们再回过头看一下
eltable源码里，哪里在调这个
大家看
这有一个do layout
那什么时候再调用do layout呢
我们再去搜
这里creat不算mounted的也不算
我们再搜
这有一个resize listener
好resize listener是在什么时候绑定的呢
大家看
它在这儿绑定的(bindEvens)
也就说它应该是在创建的时候
打开monted的时候绑定的
然后呢给谁绑定了一个resizeListener
就是
给这个当前的容器的最外层的元素
this.$el 就是...
这个div
也就是这个div尺寸发生变化的时候
它就会执行刚才那个do layout
但是呢我们再看这个代码啊
其实它这个eltable
设置了一个固定的高度
也说它最外层这个容器
它的高度是不变的了
所以它永远都不会触发resizelistener
即便咱们新增了好几行
那也是在它
的内部尺寸变化
这个div始终没有变
好那有同学可能会问
那为什么刚才新增好几行的时候
他还会出现滚动条
你不是说他外部的尺寸没有变化吗
是的！那是因为啊
他在新增一行的时候
这个数据发生变化了
他在数据发生变化的时候
他还会触发这个更新的动作
我们来看一下这部分代码
这部分代码他藏的比较深
我们就不演示查找过程了
我们这给大家上结果啊
大家看他调用了一个createStore
然后呢在这里生成了一个store对象
store对象干嘛用了呢
我们再来搜一下store对象啊
store.commit
我们搜commit
setData
在这里大家看
它在监听data属性变化
data是什么
就是我们传进来的这个数组
然后呢当这个数组发生变化的时候呢
它store.commit('setData'...
所以呢我们来看一下这个setData啊
它在这里setData的时候
也就是说
当我们这个数组发生变化的时候
就是我们新增了一行或者减少一行
他在最后会调用this.updateTableScrollY()
这个updateTableScrollY在哪呢
我们来搜一下啊
在这里又做了一层封装
其实呢还是在调用table的updateScrollY
我们再回到elTable
在这里他还是调的这个方法
所以呢也就是说啊
eltable它考虑了两种情况
一种是我们新增一行啊减少一行啊
它会更新这个
纵向的滚动条（包括横向的啊）
然后另一种情况呢
就是当外层的这个div
就是最外层的这个
尺寸发生变化的时候
他也会重新去计算这个scrollY
我们也可以验证一下
我们先把刚才那个问题出现出来
新增一个然后呢
好
现在已经有bug了对吧
好这时候咱们改变一下它的宽度啊
比如说我就放大一下网页
它宽度其实就变了
大家看
它里边的滚动条就出现了
好呢分析出原因之后呢
相信很多小伙伴已经有了解决的思路了
那我的思路呢其实很简单
我们就在它这个
select变化的时候
我们在这input
我们要想办法掉这个table里边的
我们现在在写mytable.doLayout这个方法就可以了
我们把这个myTable声明一下
我们来试一下啊
刷新一下
我把这个尺寸再缩回来啊
新增一个
好选
大家看
已经没有问题了
最后更新于