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

390 阅读1分钟

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

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

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

问题复现

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

image.png

离谱的是,去查了数据 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
};

最终完美解决问题!

希望本篇文章能帮到您!