为什么要用虚拟滚动

当表格不以分页形式展示，如果数据过多，那么dom树会将数据节点全部加载出来，如下图所示： 假如从后端获取的数据有成千上万条导致了页面卡顿，又不想改成分页展示，那么你需要用“虚拟滚动”来处理。 虚拟滚动能够实现展示所有数据，但是不在DOM树中渲染全部节点，进而优化了性能！如下图所示

什么是虚拟滚动

先知道什么是真实滚动，发生滚动前tbody顶部正好紧贴于表格内部。 当你滚动后，效果如下： 第一个节点跑到了表格的上面，也就是说tbody的位置发生了位移，这就是真实的滚动。 所谓虚拟滚动，顾名思义不是tbody在表格中位移，而是用另一个元素在表格内代替tbody滚动。

虚拟滚动实现原理

如下图所示，限制表格只渲染表格可视区域个数的数据节点，然后在el-table的el-table__body-wrapper的盒子内塞一个div，你可以理解为是伪造的tbody，div的高度 = 一行单元格的高度 * 表格数组长度。 发生滚动时，伪造的tbody进行滚动，而真正的tbody纹丝不动，只改变tbody中已选染的数据节点（个数保持不变）。 发生滚动时，通过计算得出展示数据的索引值，然后在存储所有展示数据的数组里，截取部分数据出来展示，如此虚拟滚动基本功能已实现。

Demo

参考文献

https://blog.csdn.net/Hyanl/article/details/129304466?spm=1001.2014.3001.5506

相关文章

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。