前言
众所周知Element中的Table组件在渲染大数据量的会有一定的性能问题，渲染慢交互卡。
通常来说解决大数据量表格的方式有两种, 分页查询和虚拟滚动。
在经历一系列查询及思考之后，参考黄轶老师的文章得到了很大的启发。
优化思路
我们公司的组件库是基于`element`组件库进行二次开发，所以优化`table`组件的时候可以直接修改其源码。
- 减少dom渲染
- 优化渲染过程
- 复用vnode
这里重点讲一下减少dom渲染
为了支持左右固定的样式, ElTable组件用了6个table标签来渲染，本体表头+表身, 左侧固定表头+表身, 右侧固定表头+表身。
在 ElementUI 实现中，左侧 fixed 表格和右侧 fixed 表格从 DOM 上都渲染了完整的列，然后从样式上控制它们的显隐。
这样的实现实有性能浪费, 所以准备着手从表格渲染方面进行优化。 之渲染真正需要的表格。 用css重写fixed功能。我们使用 position: sticky; 样式。(重点重点重点)
不渲染fixed多余的table
这里我们为了不影响原来的功能, 所以选择新加一个属性来把原本的fixed的隐藏掉, 这样我们就做好了第一步
现在他长这样。 需要固定的列光秃秃的什么也没有了。
把隐藏的表格和表身整出来
Table 里面是通过is-hidden类名把本应该固定的内容的visibility属性设置为hidden, 所以我们在我们需要的时候把该属性移除掉。在table-body中和table-header增加处理
现在我么可以看到内容了，
需要固定的列增加新的类名及样式
这里固定列是通过sticky定位来使需要固定的列 变成粘粘效果也就是固定效果。
这里代码比较零散就不贴了。
- 通过
table-column的属性来判断该列是不是需要被固定的列 - 需要注意的点是，左侧固定的最后一列和右侧固定的第一列需要标记一下，因为我们需要在适当的实际给他们一个阴影
- 因为
sticky是定位的一种, 所以需要给固定的列一个left值或者right值 - 给左侧固定的最后一列和右侧固定的第一列增加一个阴影样式
最后效果就是这样的
总结
优化之后的表格和优化之前的表格确实能感觉到明显的差距，但是我觉得性能还是远远不够，这是优化表格的开始，后续我会继续优化表格的性能。
我觉得从目前来说解决燃眉之急的话，还是使用分页和虚拟滚动(pl-table)可以拿去直接用。
如果有条件升Vue3的话也可以考虑一下，Element Plus优化了Table组件的写法, 也增加了对虚拟滚动的支持。
因为组件库是公司代码，所以不方便分项源码地址。感兴趣的同学可以私聊我，我会把细节的点和你一一说一下，希望大家可以从这篇文章中有所收获。
