Vue之Element級聯(lián)選擇器多選傳值以及回顯方式(樹形結(jié)構(gòu))

更新時間：2023年07月03日 11:00:33 作者：A?.?阿冰

這篇文章主要介紹了Vue之Element級聯(lián)選擇器多選傳值以及回顯方式(樹形結(jié)構(gòu))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue Element級聯(lián)選擇器多選傳值以及回顯

后臺需要的數(shù)據(jù)格式：‘a’, ‘a1’, ‘b’, ‘b1’(字符串以逗號分隔)

后臺返回的數(shù)據(jù)：同上

級聯(lián)組建

<el-cascader
? :options="industrialList"
? placeholder="請選擇產(chǎn)業(yè)鏈"
? :props="industrialProps"
? @change="changeIndustrial"
? clearable
? v-model="form.industrialChain"
></el-cascader>

組建選擇處理

changeIndustrial (val) {
? let ids = [];
? val.forEach((item) => {
? ? ids.push(item[item.length - 1]);
? })
? this.industrialChainResult = ids.join(',');
}

處理后臺返回數(shù)據(jù)進(jìn)行回顯

codes: 后臺返回的逗號分隔的字符串。
this.industrialList：從后臺取回來渲染級聯(lián)多選的樹形結(jié)構(gòu)數(shù)據(jù)。
categoryResultList：樹形結(jié)構(gòu)子集字段名

? ? // 級聯(lián)回顯
? ? industrialChinaShow (codes) {
? ? ? let echoTreeArr = [];
? ? ? let eachAry = codes.split(',')
? ? ? let itemAry = [];//分類樹組件，每一項的code數(shù)組
? ? ? // 遞歸分類數(shù)據(jù)
? ? ? let recursionCategory = (data) => {
? ? ? ? let len = data.length;
? ? ? ? for (let i = 0; i < len; i++) {//循環(huán)data參數(shù)，匹配回顯的code
? ? ? ? ? itemAry.push(data[i].code);//構(gòu)建分類樹數(shù)組項,入棧
? ? ? ? ? for (let j = 0; j < eachAry.length; j++) {//遍歷子節(jié)點分類code，拼湊成數(shù)組項code，并終止循環(huán)
? ? ? ? ? ? if (eachAry[j] == data[i].code) {//匹配到子節(jié)點code
? ? ? ? ? ? ? echoTreeArr.push(JSON.parse(JSON.stringify(itemAry)));//push進(jìn)樹分類數(shù)據(jù)
? ? ? ? ? ? ? eachAry.splice(j, 1);//刪除以匹配到的code
? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? if (eachAry.length <= 0) {//所有回顯code匹配完成后，跳出循環(huán)
? ? ? ? ? ? break;
? ? ? ? ? } else if (data[i].categoryResultList && data[i].categoryResultList.length > 0) {// 如果存在子分類，遞歸繼續(xù)
? ? ? ? ? ? recursionCategory(data[i].categoryResultList);
? ? ? ? ? }
? ? ? ? ? itemAry.pop();//出棧
? ? ? ? }
? ? ? }
? ? ? recursionCategory(this.industrialList);//調(diào)用遞歸
? ? ? this.form.industrialChain = echoTreeArr;
? ? },

在后臺返回的地方調(diào)用第三部的方法

this.industrialChinaShow(res.industrialChain) // res.industrialChain 后臺返回的'a', 'a1', 'b', 'b1'(字符串以逗號分隔)

好了就這樣。

element-ui動態(tài)級聯(lián)選擇器回顯問題解決

場景描述

后臺返回類目數(shù)組，其中有一級類目；二級類目，三級類目；這種情況下如何回顯數(shù)據(jù)

效果圖如下：

在這里插入圖片描述

先給大家展示一些數(shù)據(jù)結(jié)構(gòu)，后面會給大家一一講解；尤其是回顯那部分

數(shù)據(jù)結(jié)構(gòu)如下

id：自己的id
level：等級
pid：父級id，0位第一級
name：名字

[
    {
    	id:1, level:0,pid:0,name:'測試1'            
    },
    {
    	id:2, level:0,pid:0,name:'測試2'            
    },
    {
    	id:11, level:1,pid:1,name:'測試1-1'            
    },
    {
    	id:12, level:2,pid:11,name:'測試1-1-1'            
    }
]

先貼上html部分

<el-cascader :props="categoryProps" 
            v-model="cascaderData"></el-cascader>

然后再貼上data數(shù)據(jù)中的部分

這兒需要注意幾個點：label、value需要改為你數(shù)據(jù)結(jié)構(gòu)一致的字段；lazyLoad函數(shù)中的node有許多參數(shù)，如果目前的不能滿足你的需求；你可以查看里面的一些參數(shù)是否有你需要的數(shù)值；現(xiàn)在data中的lazyLoad函數(shù)主要是一些默認(rèn)值；

      cascaderData: '12',
      categoryProps: {
        emitPath: false,
        label:'name', // 字段必須統(tǒng)一
        value:'id', // 字段必須統(tǒng)一
        lazy: true,
        lazyLoad (node, resolve) {
          const { level,value } = node;
          console.log(value);
          let nodes = [];
          if (level == 0) { // 第一級
            nodes = catalogueList.filter(v=>{return v.level == 0});
          }else { // 后面兩級
            nodes = catalogueList.filter(v=>{return v.pid == value});
          };
          resolve(nodes.map(v=>({
            id: v.id,
            name: v.name,
            leaf: level >= 2
          })));
        }
      }, // 級聯(lián)選擇器顯示數(shù)據(jù)

回顯的方法

將以下方法賦值給lazyLoad函數(shù)即可實現(xiàn)回顯了；

邏輯：

cascaderData：是選擇的參數(shù)最后一級id
value：我們在選擇是（鼠標(biāo)點擊選擇的）會觸發(fā)并返回id，如果沒有選擇點擊，則返回undefined（我們就在這兒進(jìn)行判斷是回顯還是手動觸發(fā))
先說回顯：threeFind：我們根據(jù)有的最后一級id（cascaderData），去查找改數(shù)據(jù)并查詢到他父級（twoFind）；然后根據(jù)他父級查找到（第三級）的所有數(shù)據(jù)（threeData）
然后根據(jù)二級數(shù)據(jù)（twoFind）去查找一級（oneFind），然后根據(jù)一級（oneFind）查找到二級的所有數(shù)據(jù)；一級不用查（level==0）全是
這個時候開始將對應(yīng)（二級，三級）的數(shù)據(jù)放到children下面；children是默認(rèn)的值；會自動去查找
在放置第三級的數(shù)據(jù)的時候需要注意一個值：leaf，為true時就是結(jié)束；也必須寫這個；否則選擇器不會顯示，但是展開的時候是顯示狀態(tài)
現(xiàn)在回顯也完成了；但是我們從二級或者一級選擇分類的時候，會出現(xiàn)一級或者二級數(shù)據(jù)跑到二級或者三級目錄下等清楚；這個時候就需要將選中的數(shù)據(jù)查找到
然后將其子集的數(shù)據(jù)查找出來；并判斷如果是第三級就leaf:true；即可完成
趕緊去試試吧！

    setLazyLoad(node, resolve) {
      const { level,value } = node;
      const cascaderData = this.cascaderData;
      // 第一級數(shù)據(jù)
      let nodes = [];
      nodes = catalogueList.filter(v=>{return v.level == 0});
      // 選中的第三級某位數(shù)據(jù)
      const threeFind = catalogueList.find(v=>{return v.id == cascaderData});
      if (value) {
        // 查詢數(shù)據(jù)
        const unknownFind = catalogueList.find(v=>v.id == value);
        if (level == 1) {
          let twoData = catalogueList.filter(v=>v.pid == unknownFind.id);
          nodes = twoData; // 第二級
        }else if (level == 2) {
          let threeData = catalogueList.filter(v=>v.pid == unknownFind.id);
          nodes = threeData.map(v=>{return {id:v.id,name:v.name,level:v.level,leaf:true}}); // 第三級
        };
      }else {
        // 選中的第二級某位數(shù)據(jù)
        let twoFind = catalogueList.find(v=>v.id == threeFind.pid);
        // 第三級數(shù)據(jù)
        let threeData = catalogueList.filter(v=>v.pid == twoFind.id);
        // 選中的第一級某位數(shù)據(jù)
        const oneFind = catalogueList.find(v=>{return v.id == twoFind.pid});
        // 第二級數(shù)據(jù)
        let twoData = catalogueList.filter(v=>{return v.pid == oneFind.id});
        // nodes = nodes.map(v=>{return {id:v.id,name:v.name,level:v.level}}); // 第一級
        const oneIndex = nodes.findIndex(v=>{return v.id == oneFind.id});
        nodes[oneIndex].children = twoData; // 第二級
        const twoIndex = nodes[oneIndex].children.findIndex(v=>v.id == twoFind.id);
        nodes[oneIndex].children[twoIndex].children = threeData.map(v=>{ // 第三季
          return {
            id:v.id,
            name:v.name,
            level:v.level,
            leaf: true,
          }
        });
      }
      resolve(nodes);
    },