记一次 element-plus el-table-v2 表格滚动卡顿问题优化

概述

1. 减少单元格内的组件, 尽量原生/简单实现
2. el-table-v2 目前没有横向虚拟滚动, 列多了还是卡, 可以换 vxeTable 试试

排查思路

只记录下排查思路, 具体代码就不写了

1. 看看 performance

   发现没什么耗时长的特殊方法, 全是 vue 底层各种 update , 解决不了, pass

2. 让单元格全部固定显示空, 看看是不是单元格内容多了卡顿

   滚动变快了, 看来是单元格内容的问题

3. 尝试减少单元格内的数据计算

   单元格内多个组件, 显示值的自定义组件是系统通用的, 里面有很多表格页用不上的逻辑和计算逻辑

   尝试优化该组件的计算, 把计算逻辑全部拿到表格页来, 获取完表格数据后直接计算传值给该组件显示

   收效甚微…

4. 减少单元格内的组件

   单元格内就两个 icon (只有一列有, v-if 条件显示) + 显示值组件, 显示值组件内除了原生 span 外大部分情况下就一个 el-tooltip , 尝试去掉 el-tooltip,

   效果大大提升!!!(对比改动前后, 视觉效果 + performance 表现)

   ps: 之后用了一个外部全局通用的 el-tooltip 组件 + virtual-ref 实现了原有功能

5. 没有水平虚拟滚动, 列多了还是卡

   换 vxeTable , 换了之后配好虚拟滚动效果好很多

   注意: 如果不优化单元格, 单元格内组件多了, 光换 vxe-table 也有可能卡顿

6. vxeTable 配置虚拟滚动注意事项

   我配置的是

   :virtual-y-config="{enabled: true, gt: 0}"
   :virtual-x-config="{enabled: true, gt: 0}"
   

   本来想配置一些预加载行/列的, 发现好像配置后滚动时会看到空行/列, 那还是算了, 宁可滚动稍微慢一点儿