解决Element框架el-tree树组件默认选中节点问题（默认选中节点不正确）

前言：记录一下今天业务开发遇到一个难点，仔细看了数据发现都没问题，但是，默认打开时，树节点默认选中就是不对。

角色名称为 测试 的只有首页权限

角色名称为 系统管理员 的有全部权限

问题复现

我第一打开角色名称为 测试 的时候是正常的，我在打开 系统管理员 时默认选中节点也是正常的，这时问题来了，当我再去打开 测试 角色的权限分配时，发现全部节点都勾选上了，就类似受到数据污染似的。如下错误效果图：

离谱的是，去查了数据 default-checked-keys，发现默认打开节点的数据是正确的，这时我就卡住了，仔细想了很久，根据经验，数据具有响应式并且数据也是正确的，就怀疑是渲染先后的问题，于是想到了v-if控制el-tree组件的渲染。试用后发现真的就解决了

解决办法

        <el-tree
        
          v-if="isShowTree" //使用v-if控制组件渲染
          
          :data="treeData"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="defaultCheckedKeys"
          :props="defaultProps"
          @check="checkChange"
        />

打开弹框，调取接口，获取数据后，isShowTree设置为true

      if (res.code === 1) {
        defaultCheckedKeys.value = res.data;
        
        //从后台获取到数据后，在把isShowTree 设置为true
        isShowTree.value = true
        
      }

弹框关闭后在把isShowTree 设置为false

const handleClose = () => {
  ruleFormRef.value?.resetFields();
  
  isShowTree.value = false //设置为false
};

最终完美解决问题！

希望本篇文章能帮到您！