表格树(有展开功能)数据量大导致渲染慢问题的解决方法

1. 项目中用到表格树，有层级展开功能，现场数据量非常大，初始渲染和进行一些操作时会非常卡顿，使用效果差。
2. 表格树卡顿的解决方案：懒加载和虚拟表格。

• 懒加载
  • element table 的懒加载 官网地址
    • 使用<el-table>懒加载，点击父级调用接口获取子级。
    • 优点：按层级获取数据，节点数据异步加载，减轻渲染压力。
    • 缺点：只能一个层级一个层级的展开，若需求需要一次性打开所有层级，则无法实现。
    • 数据结构：通过hasChildren定义是否有子级，子级数据放在父级的children中
• 虚拟表格
  • element plus 虚拟化表格 官网地址
    • 使用<el-table-v2>
    • 缺点：该组件仍在测试中，生产环境使用可能有风险。(来自官方提示)
    • 数据结构：没有children，是普通的对象数组，id为唯一值，通过id和parentId一致确定是否是子级数据
  • vxe-table 官网地址
    • 使用<vxe-table>
    • 数据结构：
      • 没有children，是普通的对象数组，id为唯一值，通过id和parentId一致确定是否是子级数据(支持虚拟表格)
      • 有children的格式(不支持虚拟表格)

1. 表格树的数据量大，不可避免会导致页面渲染速度慢。
2. 如果表格树可编辑，则最好先隐藏输入框，点击某行再把该行的输入框显示出来。会减少一些初次渲染时间。
3. 避免一些需要遍历树结构的需求，遍历树结构也会耗费时间。
4. 开发之前需要提前预知是否数据量大会导致卡顿，需提前选择解决方案，因为不同解决方案的数据结构不同，后期再改成本和风险太大。
5. 避免在表格单元格中添加遍历方法，因为在每次点击表格行、勾选等操作后，都会触发，会大大增加渲染时间。