el-table固定表头滚动时，表头不跟手抖动的问题
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
大家能看到这个表头在抖动吗
就是说他在滚动的时候
这个表头明显是有延迟的
而且呢他官方的例子也有这个问题
大家看
那我们今天就来看看这个问题
首先呢我们都知道
他为了实现这个表头的固定
他把上面
和下边的表格分别做成了两个表格
用js的监听来实现这个上下的同步
我们来试一下把js禁用掉
disable javascript
我们再来滚动
它上面就不动了
我们再恢复一下啊
enable
大家看就好了
所以呢
我们先去看一下他这个table的源码
我们从项目里点进去啊
你会发现这有一个bindEvents
然后呢他在bodyWapper
加了一个scroll事件
去调这个方法
然后呢我们看这个方法
这个方法
第一个映入眼帘的就是他这有个节流
那我就想
我们是不是把节流去掉就好了哈
所以呢我搞了一个eltable继承自他
然后呢覆盖他的方法
现在呢他是有截流的
(我把那个方法复制过来的)
我把这个节流去掉
好刷新 大家看
就很跟手了
然后再把节流 加上
再试一下
大家看
就不行了
那我就想
为什么他要加这个截流
他当时除了优化这个性能
是不是为了解决页面上某些可见的BUG
所以呢我就想把他这个代码拉下来啊
从他提交记录里面看一下
那我把他代码拉下来以后呢我发现
他这个也没有截流了
仔细看呢是因为他3个月之前
叫博风的这个人也修复了这个bug
大家看fix table header sync
那三个月之前
呢我们就可以联想到他发布的这个
2.15.9这个版本
我们来看一下
fix the table header shake（口误） bug
这个pr号是21863我们来看一下啊
21863 也就是说
其实啊这个2.15.9解决了这个问题
但是呢因为之前我分享过这期视频
2.15.
在用el-date-picker的时候呢总是报警告
所以呢我们就把它回退了
没用这个版本
那我们先不管他怎么解决的哈
我们先来看一下他当时为什么
加上这个节流
我们先来看一下他提交记录
这个说起来也挺巧的
大家看
博风是在今年5月30号提的这个PR
就在三年前
2019年的5月30号这个人写的这个截流
大概他pr号是
我们来看一下
然后呢这里边针对的提到的这些issues哈
就没有提到这个节流的问题
如果有的话呢说明他是解决了某个BUG
但他没有我们来看他提交
这里边有一个提高性能
就在这里面
这
一次提到里边呢
涉及到这个table.vue这个代码
看
他在这加的这个截流
所以由此可见如果把这个节流去掉
除了对性能上会造成影响之外呢
不会在页面上产生一些可见的BUG
那我们再回过头看
博风是怎么解决这个问题的哈
其实他并不是简单的把截流去掉了
我们来看下面这个bind
他没有直接绑定到刚才那个
方法
而是呢
只绑定到了一个onScroll（他新写的方法）
onScroll里边
他会判断一下
浏览器是不是支持这个方法
如果浏览器支持这个方法呢
他用这个方法替代了截流
否则的话呢他还是有截流
只是把截流从20改成了
那为什么是16呢
我们都知道如果浏览器的刷新率是
意味着他一秒会刷新60次
那一秒又是1,000毫秒
所以就意味着这1,000毫秒刷新60次
他每隔
16.666就会刷新一次
所以他在这写16是为了兼容
60赫兹刷新率
如果你刷新率高于
就很容易看出来他这个抖动
不过呢话说回来
现在大部分浏览器都支持这个方法了
所以呢基本上就不会有什么问题
那所以我们就把这个代码
复制过来
把这一段都拿过来
拿到我自己项目里然后呢
在集成这里边
前提是啊
我们注意要把它用过的这个倒进来
还有这两个倒进来
否则就报错
这样的话呢我们再来试一下
大概没有任何问题了