el-table表头抖动的问题

1、问题

elementUI中的el-table左右滑动时，表头相对于表格内容会有延迟，如下图，具体可去elementUI官网中查看。

2、为什么会有这个问题

因为el-table的实现是用两个表格来实现的，表头是一个table，内容是一个table，el-table源码中让table1跟着table2滑动的做法是：给table2添加一个监听事件，一旦table2滑动，就重新计算table1的位置。

 

 3、解决

 其实elementUI 2.15.9版本中已经修复了这个问题。，我们看一下github里el-table的源码，看看怎么解决的。地址：Release v2.15.9 · ElemeFE/element (github.com)

 源码：

415行，原来的代码为了性能优化，在这里写了个throttle节流函数。

446、453行，2.15.9版本中，把表头绑定的事件和解绑事件函数换成了自己写的一个onScroll函数。

436行，onScroll函数，首先判断浏览器是否支持requestAnimationFrame（这个浏览器支持的api比自己写的节流性能有很大提升）这个API，如果不支持，就还是用原来手写的节流函数；如果支持就使用这个API，将原来的节流函数作为参数传进去。

432行，改了一下之前的节流函数，将时间从20ms改到了16ms，原因是一般计算机显示器的刷新率都是60HZ，也就是浏览器每秒需要重绘60次，用1秒除以60，也就是1000ms/60，约等于16.6666667，那么最合适的重绘间隔也就是16ms或者17ms，这个时间能实现最平滑的动画过渡效果，如果低与这个值，用户也感知不到，且会造成浪费性能，所以16ms最合适。

 所以总结，新版elementUI解决这个问题的方法：

1、把节流函数换成了requestAnimationFrame函数。

2、把手写节流的事件从20ms换到了最适合浏览器的16ms。

（ps：不过element UI官网还是2.15.7版本，但是github上更新到了2.15.9版本）