大数据量树结构卡死

背景

考试人员选择中成员在管理员登录的情况下是全部部门可见的，此时成员可能有几万到十几万，因为现有组件是对全部数据一次性渲染成树结构，在大数据量的情况下就会导致页面卡死的情况

可选解决方案

方案一：虚拟列表方案 + 重构el-tree

优点：

  1. 性能优化： 虚拟列表方案可以有效减小DOM渲染，只渲染可见区域的节点，降低了浏览器的渲染压力，提高了页面的性能。
  2. 可定制性： 通过对el-tree的重构，可以更灵活地定制树组件，根据具体需求进行功能增强或修改。

缺点：

  1. 工作量较大： 对el-tree进行重构可能需要大量的工作，包括对组件结构的调整、对现有功能的适配、可能的样式调整等，工作量相对较大。
  2. 依赖关系： 如果项目中已经大量使用el-tree，重构可能导致对项目其他部分的影响，需要谨慎处理。

方案二：使用vue-giant-tree组件

优点：

  1. 专注性能： vue-giant-tree是专门为大数据量树结构设计的组件，其核心目标是提供更好的性能。采用了虚拟滚动等技术，适用于处理大规模数据，减轻前端渲染压力。
  2. 易集成： 由于vue-giant-tree是专门为Vue.js设计的，可能更容易集成到Vue项目中，减少对项目其他部分的依赖关系。

缺点：

  1. 可能不够灵活： 相对于el-tree，vue-giant-tree可能在功能上略显简化，如果项目中使用到了el-tree的一些特定功能，可能需要进行适配或者牺牲一部分功能。
  2. 学习成本： 需要重新进行文档的学习，引入vue-giant-tree。

从el-tree修改为vue-giant-tree

  1. 引入相关依赖
  2. 数据结构适配，白名单展示
  3. 对应样式调整
  4. 事件处理，el-tree与vue-giant-tree对应的事件有所不同
  5. 原有功能适配调整