关于element-tree，解决id相同如何回显，同样的id只能选中一个的坑！！！！-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于element-tree，解决id相同如何回显，同样的id只能选中一个的坑！！！！。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、背景

因为最近一直在跟学校合作，所以在开发的过程中，遇过了这么一个坑：【因为学校的老师可能身兼不同的职位，年级主任也可以兼任班主任，所以就会存在一个人在不同的部门，但是element-tree默认需要唯一值，也就是说，id不能一样。所以现在的情况就是勾选部门A的老师A，但是部门B的状态没有改变，会导致被覆盖,只能勾选中一个。包括回显的时候只显示某一个的老师A是勾选状态，其他部门下的老师A仍然是未被勾选的状态】想了想，这种情况应该在多种领域都存在，所以想记录保存一下，我会把我自己解决问题的代码附上，仅供参考，如果大家还有其他合适的方法，也可以讨论一下。（网上查了一下，有改源码的，我不太建议这么做。）

二、需要解决的问题及思路

目前要解决两个问题：

1、勾选的时候id相同的都要勾选上，反之也一样。

2、后台数据返回默认勾选的的id数组时，id相同的都被勾选。

思路：

因为id相同，所以element-tree没有唯一值，我们需要将数据遍历，给每一条数据添加一个新的字段key，形成新的list，给tree一个node-key。在选中的时候，遍历数组，查询id相同的节点并取出key值组成新的数组checkedList，我们运用element-tree的方法setChecked，来改变当前id相同的节点的选中状态。

保存的时候，因为我们需要给后台传递老师的id数组，但是我们取到的是key值数组，我们需要获取当前选中的节点，此时数组中肯定是有重复的，我们还需要去重。

三、代码

1、首先在vue里面封装一个方法eachTreeData，我是放在了utils文件夹下的util.js文件里，方便后期使用。可遍历children形式的数据，（因为后台返回给我的数据时children形式的）

    /**
     * 遍历children形式数据
     * @param data 需要遍历的数组
     * @param callback 回调
     * @param childKey children字段名
     */
        eachTreeData(data, callback, childKey) {
        if (!childKey) childKey = 'children';
        data.forEach(d => {
            if (callback(d) !== false && d[childKey]) this.eachTreeData(d[childKey], callback, childKey);
        });
    }

2、页面代码

<el-tree ref="teacherTree" :data="teacherList" :props="{ label: 'name' }"
                 node-key="key" show-checkbox :default-expanded-keys="teacherListNode" :default-checked-keys="checkedList" @check-change="setTeacherChecked"/>

3、js代码（methods方法）

data(){
    teacherList:[],//部门教师树
    teacherListNode:[0],//默认展开的节点，因为重新添加字段，所以写死默认打开第一级
    checkedTeacherList:[],//后台返回的默认选中的id数组
    checkedList:[],//选中的key数组
    params:{//提交的数据
        teacherIds:[]
    }
}
methods:{
    //获取部门教师树
    getTeacherList:{
        //假设我们已经获取到List，通过axios获取
        this.addKeyToList(this.teacherList)//遍历数据，给节点添加key(唯一值)
    }
    //给树的每一个节点 添加一个key（唯一值），并算出默认选中的节点key数组
    addKeyToList(data){
        let key = 0;
        this.$util.eachTreeData(data, (d) => {
           d.key = key++
        })//遍历数据给每一个node添加一个key
        this.checkedList = this.contrastList(data)//对比相同id的节点并获取key数组
    },
    //对比后台传回来默认选中的checkedTeacherList，返回checkedList
    contrastList(data){
        this.$util.eachTreeData(data, (d) =>{
        this.checkedTeacherList.forEach((item) => {
          //id相同就push一个key
          if(item == d.id){
            checkedList.push(d.key)
          }
        })
      })
      return checkedList
    },
    //点击节点，判断该节点id是否有重复的，如果有相同id执行相同的操作（选中或取消选中）
    setTeacherChecked(data,isChecked){
      this.$util.eachTreeData(this.teacherList, (item) => {
        if(data.id === item.id){
          this.$refs.teacherTree.setChecked(item.key,isChecked,false)
        }
      })
    },
    //保存提交
    saveTeacher(){
        let  teacherIds = this.$refs.teacherTree.getCheckedNodes()//获取选中的节点数据
        teacherIds.forEach((item) => {//遍历获取教师id
            this.params.teacherIds.push(item.id)
        })
        this.fileParam.teacherIds = [...new Set(this.fileParam.teacherIds)]//去重
        //提交！
    },
}

四、总结

大概就是这么个情况，主要还是为自己记录一下，如果大家也有类似的问题，希望这篇文章能够帮助你，代码应该挺好理解的，有什么不懂的可以在评论区提问，看到就会回答了。谢谢~文章来源地址https://www.toymoban.com/news/detail-491091.html

到了这里，关于关于element-tree，解决id相同如何回显，同样的id只能选中一个的坑！！！！的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！