一、背景

因為最近一直在跟學校合作，所以在開發(fā)的過程中，遇過了這么一個坑：【因為學校的老師可能身兼不同的職位，年級主任也可以兼任班主任，所以就會存在一個人在不同的部門，但是element-tree默認需要唯一值，也就是說，id不能一樣。所以現(xiàn)在的情況就是勾選部門A的老師A，但是部門B的狀態(tài)沒有改變，會導致被覆蓋,只能勾選中一個。包括回顯的時候只顯示某一個的老師A是勾選狀態(tài)，其他部門下的老師A仍然是未被勾選的狀態(tài)】想了想，這種情況應該在多種領域都存在，所以想記錄保存一下，我會把我自己解決問題的代碼附上，僅供參考，如果大家還有其他合適的方法，也可以討論一下。（網(wǎng)上查了一下，有改源碼的，我不太建議這么做。）

二、需要解決的問題及思路

目前要解決兩個問題：

1、勾選的時候id相同的都要勾選上，反之也一樣。

2、后臺數(shù)據(jù)返回默認勾選的的id數(shù)組時，id相同的都被勾選。

思路：

因為id相同，所以element-tree沒有唯一值，我們需要將數(shù)據(jù)遍歷，給每一條數(shù)據(jù)添加一個新的字段key，形成新的list，給tree一個node-key。在選中的時候，遍歷數(shù)組，查詢id相同的節(jié)點并取出key值組成新的數(shù)組checkedList，我們運用element-tree的方法setChecked，來改變當前id相同的節(jié)點的選中狀態(tài)。

保存的時候，因為我們需要給后臺傳遞老師的id數(shù)組，但是我們?nèi)〉降氖莐ey值數(shù)組，我們需要獲取當前選中的節(jié)點，此時數(shù)組中肯定是有重復的，我們還需要去重。

三、代碼

1、首先在vue里面封裝一個方法eachTreeData，我是放在了utils文件夾下的util.js文件里，方便后期使用?？杀闅vchildren形式的數(shù)據(jù)，（因為后臺返回給我的數(shù)據(jù)時children形式的）

? ? /**
     * 遍歷children形式數(shù)據(jù)
     * @param data 需要遍歷的數(shù)組
     * @param callback 回調(diào)
     * @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],//默認展開的節(jié)點，因為重新添加字段，所以寫死默認打開第一級
? ? checkedTeacherList:[],//后臺返回的默認選中的id數(shù)組
? ? checkedList:[],//選中的key數(shù)組
? ? params:{//提交的數(shù)據(jù)
? ? ? ? teacherIds:[]
? ? }
}
methods:{
? ? //獲取部門教師樹
? ? getTeacherList:{
? ? ? ? //假設我們已經(jīng)獲取到List，通過axios獲取
? ? ? ? this.addKeyToList(this.teacherList)//遍歷數(shù)據(jù)，給節(jié)點添加key(唯一值)
? ? }
? ? //給樹的每一個節(jié)點 添加一個key（唯一值），并算出默認選中的節(jié)點key數(shù)組
? ? addKeyToList(data){
? ? ? ? let key = 0;
      ? this.$util.eachTreeData(data, (d) => {
        ? ?d.key = key++
      ? })//遍歷數(shù)據(jù)給每一個node添加一個key
      ? this.checkedList = this.contrastList(data)//對比相同id的節(jié)點并獲取key數(shù)組
? ? },
? ? //對比后臺傳回來默認選中的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
? ? },
? ? //點擊節(jié)點，判斷該節(jié)點id是否有重復的，如果有相同id執(zhí)行相同的操作（選中或取消選中）
? ? 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()//獲取選中的節(jié)點數(shù)據(jù)
? ? ? ? teacherIds.forEach((item) => {//遍歷獲取教師id
? ? ? ? ? ? this.params.teacherIds.push(item.id)
? ? ? ? })
? ? ? ? this.fileParam.teacherIds = [...new Set(this.fileParam.teacherIds)]//去重
? ? ? ? //提交！
? ? },
}

四、總結

大概就是這么個情況，主要還是為自己記錄一下，如果大家也有類似的問題，希望這篇文章能夠幫助你，代碼應該挺好理解的，有什么不懂的可以在評論區(qū)提問，看到就會回答了。謝謝~文章來源地址http://www.zghlxwxcb.cn/news/detail-491091.html