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版本)

猜你喜欢

转载自blog.csdn.net/huiaixing/article/details/126880034