el-tree用id绑定node-key,一棵树下又有相同的id，怎么办？

今天该下班的时候出现一个bug，按照官方给出的api，this.$refs.tree2.setCheckedKeys([])并没有完全修改左侧的修改状态，下面先展示一下正确的情况和出现bug的情况一.页面展示1.页面逻辑2.正确情况3.错误情况二、问题分析分析出现错误的情况，只有【测试1】这个用户的选中状态未被修改，而【测试1】这个用户同时也在下面【分组二】这个分组中，怀疑是不是因为又在别的分组存

邵邵邵

9891人浏览 · 2021-09-13 11:08:01

邵邵邵 · 2021-09-13 11:08:01 发布

今天该下班的时候出现一个bug，按照官方给出的api，this.$refs.tree2.setCheckedKeys([])并没有完全修改左侧的修改状态，下面先展示一下正确的情况和出现bug的情况
一.页面展示
1.页面逻辑
在这里插入图片描述
2.正确情况

3.错误情况

二、问题分析
分析出现错误的情况，只有【测试1】这个用户的选中状态未被修改，而【测试1】这个用户同时也在下面【分组二】这个分组中，怀疑是不是因为又在别的分组存在，选中状态才不会被修改的，于是又在【分组一】分组中添加了几个【分组二】中存在的用户，相同的操作，看是什么情况
在这里插入图片描述
确实，只有存在不同的分组的时候就不会被修改选中状态，查看elementui的官方文档，node-key来标识树的节点，在这棵树中出现了相同的id，这是不允许的。所以才不会处理这个节点三、改bug
后端返回的数据结构中的子数据不是放在children这个字段的，而是放在users这个字段，而elementui中又要识别children属性，在前端需要添加一个children属性，

getusergroup().then((res) => {
        this.TreeData = res //拿到所有的分组
        for (var i = 0; i < res.length; i++) {//给分组添加children属性
          this.$set(this.TreeData[i], 'children', res[i].users.map((item)=>{//同时添加treeId字段来唯一标识树的节点
            item.treeId =i+'p'+item.id;//i表示分组的下标，id是用户的id,拼接‘p’,表示字符串拼接
            return item
          }))
        }
      }

这样每个节点就有唯一的id了，然后用node-key绑定treeId即可
在这里插入图片描述
打印treeId看一下：