Vue3 el-tree-v2渲染慢的问题

一、现象

使用el-tree-v2处理组织架构权限时，整个树的数据在8500条，勾选数据8200条，打开页面需要8~10秒，用户无法接受。 经调试，发现主要卡在树的渲染回显上（勾选数据少时，很快，勾选数据越多越慢）。

原始代码如下：

 <el-tree-v2 highlight-current ref="treeRef" node-key="orgNo" :data="orgOptions" :width="600" :height="380"
              :props="props" show-checkbox />

//取得后端数据后进行勾选
proxy.$nextTick(() => {
        proxy.$refs.treeRef.setCheckedKeys([]);        
        proxy.$refs.treeRef.setCheckedKeys(checkedKeys.value);     
      });

二、解决方法

1.设置属性:check-strictly，如下

<el-tree-v2 highlight-current ref="treeRef" node-key="orgNo" :data="orgOptions" :width="600" :height="380"
             :props="props" show-checkbox :check-strictly="checkStrictly" />
  
const checkStrictly = ref(false);           

2.在取回后端数据时，处理checkStrictly
处理逻辑：

1. 先设置树为严格模式（不联动）
2. 记录选中的条数
3. 设置树的选中状态（不联动，速度很快）
4. 最后一条时，恢复树联动状态
5. 延时处理最后一条（会自动刷新整个树的勾选状态）

代码如下：

 let checkedIndexs = [];
 //设置严格模式，即上下级不联动
 checkStrictly.value = true; 
 //测试数据基本在100毫秒内处理完
 proxy.$nextTick(() => {
        proxy.$refs.treeRef.setCheckedKeys([]);
        let count = checkedKeys.value.length;//此为选中的数据
        //遍历数据，设置复选框状态
        for (let index = 0; index < count; index++) {
          //最后一行时，取消严格模式，即上下级联动
          if (index >= count - 1) {
            checkedIndexs.push(index);
            checkStrictly.value = false;
          }
          proxy.$refs.treeRef.setChecked(checkedKeys.value[index], true);
        }

      });

//延时处理，最后一行，联动状态
setTimeout(() => {
      checkedIndexs.forEach(element => {
        proxy.$refs.treeRef.setChecked(checkedKeys.value[element], true);
      });
    }, 200); //测试数据100毫秒执行完上面的遍历，安全起见，再预留100毫秒

3.效果
经过在上面的处理后，用户基本无感，整个回显处理不过300毫秒。

ps:
这个问题折腾了很久，网上也有说懒加载什么的，也尝试更换别的控件。最后发现是联动处理时，会遍历整个树，造成性能低下。所以，在开始时，取消联动处理（即不遍历树的关系），最后一条数据才处理联动（上级勾选/半勾选），整个树能秒出。