element多選級聯回顯

1.如果直接處理二維數據

// 轉換後的二維數組(多選級聯回顯)
      convert(arr) {
        var map1 = {};
        while(arr.length) {
          let current = arr.pop(); // 會影響原數組
          // console.log('current.relationId',map1[current.relationId])
          map1[current.relationId] = map1[current.relationId] || [];
          if(current.tid){
            map1[current.relationId].push(current.tid, current.pid, current.relationId);
          }else{
            map1[current.relationId].push(current.pid,current.relationId);
          }
        }
        return Object.keys(map1).map(key => map1[key]);
      },
      

2.三維數據(先處理數據再調用convert()方法處理)

//多選級聯回顯(三級數據處理)
      // tid,1級數據;pid,2級數據;id,3級數據
      convertPlus(p){
        // console.log('ppp', p)
        const r = []
        const hash = {}
        const len = p.length
        for (let i = 0; i < len; i++) {
          hash[p[i]['relationId']] = p[i] //所有以id爲標記的數據
        }
        console.log('hashVPforPid',hash)
        for (let j = 0; j < len; j++) {
          const aVal = p[j]
          const hashVP = hash[aVal['pid']] //取aVal以pid爲標記的數據,如果在hash中存在
          if(hashVP){
            this.$set(aVal, 'tid', hashVP.pid)
          }
          r.push(aVal)
        }
        return r
      },

3.處理後的數據格式

頁面效果(處理後臺返回數據,回顯效果如下):

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章