- 项目中用到表格树，有层级展开功能，现场数据量非常大，初始渲染和进行一些操作时会非常卡顿，使用效果差。
- 表格树卡顿的解决方案：懒加载和虚拟表格。
- 懒加载
element table 的懒加载 官网地址
- 使用<el-table>懒加载，点击父级调用接口获取子级。
- 优点：按层级获取数据，节点数据异步加载，减轻渲染压力。
- 缺点：只能一个层级一个层级的展开，若需求需要一次性打开所有层级，则无法实现。
- 数据结构：通过hasChildren定义是否有子级，子级数据放在父级的children中
- 虚拟表格
element plus 虚拟化表格 官网地址
- 使用<el-table-v2>
- 缺点：该组件仍在测试中，生产环境使用可能有风险。(来自官方提示)
- 数据结构：没有children，是普通的对象数组，id为唯一值，通过id和parentId一致确定是否是子级数据
vxe-table 官网地址
- 使用<vxe-table>
- 数据结构：
- 没有children，是普通的对象数组，id为唯一值，通过id和parentId一致确定是否是子级数据(支持虚拟表格)
- 有children的格式(不支持虚拟表格)
- 表格树的数据量大，不可避免会导致页面渲染速度慢。
- 如果表格树可编辑，则最好先隐藏输入框，点击某行再把该行的输入框显示出来。会减少一些初次渲染时间。
- 避免一些需要遍历树结构的需求，遍历树结构也会耗费时间。
- 开发之前需要提前预知是否数据量大会导致卡顿，需提前选择解决方案，因为不同解决方案的数据结构不同，后期再改成本和风险太大。
- 避免在表格单元格中添加遍历方法，因为在每次点击表格行、勾选等操作后，都会触发，会大大增加渲染时间。
