elementui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問題怎么解決

這篇文章主要講解了“elementui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問題怎么解決”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“elementui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問題怎么解決”吧！

場(chǎng)景描述

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

效果圖如下：

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

• id：自己的id

• level：等級(jí)

• pid：父級(jí)id，0位第一級(jí)

• name：名字

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

先貼上html部分

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

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

這兒需要注意幾個(gè)點(diǎn)：

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) { // 第一級(jí)
            nodes = catalogueList.filter(v=>{return v.level == 0});
          }else { // 后面兩級(jí)
            nodes = catalogueList.filter(v=>{return v.pid == value});
          };

          resolve(nodes.map(v=>({
            id: v.id,
            name: v.name,
            leaf: level >= 2
          })));
        }
      }, // 級(jí)聯(lián)選擇器顯示數(shù)據(jù)

回顯的方法：

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

邏輯：

1. cascaderData：是選擇的參數(shù)最后一級(jí)id

2. value：我們?cè)谶x擇是（鼠標(biāo)點(diǎn)擊選擇的）會(huì)觸發(fā)并返回id，如果沒有選擇點(diǎn)擊，則返回undefined（我們就在這兒進(jìn)行判斷是回顯還是手動(dòng)觸發(fā))

3. 先說回顯：threeFind：我們根據(jù)有的最后一級(jí)id（cascaderData），去查找改數(shù)據(jù)并查詢到他父級(jí)（twoFind）；然后根據(jù)他父級(jí)查找到（第三級(jí)）的所有數(shù)據(jù)（threeData）

4. 然后根據(jù)二級(jí)數(shù)據(jù)（twoFind）去查找一級(jí)（oneFind），然后根據(jù)一級(jí)（oneFind）查找到二級(jí)的所有數(shù)據(jù)；一級(jí)不用查（level==0）全是

5. 這個(gè)時(shí)候開始將對(duì)應(yīng)（二級(jí)，三級(jí)）的數(shù)據(jù)放到children下面；children是默認(rèn)的值；會(huì)自動(dòng)去查找

6. 在放置第三級(jí)的數(shù)據(jù)的時(shí)候需要注意一個(gè)值：leaf，為true時(shí)就是結(jié)束；也必須寫這個(gè)；否則選擇器不會(huì)顯示，但是展開的時(shí)候是顯示狀態(tài)

7. 現(xiàn)在回顯也完成了；但是我們從二級(jí)或者一級(jí)選擇分類的時(shí)候，會(huì)出現(xiàn)一級(jí)或者二級(jí)數(shù)據(jù)跑到二級(jí)或者三級(jí)目錄下等清楚；這個(gè)時(shí)候就需要將選中的數(shù)據(jù)查找到

8. 然后將其子集的數(shù)據(jù)查找出來；并判斷如果是第三級(jí)就leaf:true；即可完成

9. 趕緊去試試吧！

    setLazyLoad(node, resolve) {
      const { level,value } = node;
      const cascaderData = this.cascaderData;
      // 第一級(jí)數(shù)據(jù)
      let nodes = [];

      nodes = catalogueList.filter(v=>{return v.level == 0});
      // 選中的第三級(jí)某位數(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; // 第二級(jí)
        }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}}); // 第三級(jí)
        };
      }else {
        // 選中的第二級(jí)某位數(shù)據(jù)
        let twoFind = catalogueList.find(v=>v.id == threeFind.pid);
        // 第三級(jí)數(shù)據(jù)
        let threeData = catalogueList.filter(v=>v.pid == twoFind.id);
        // 選中的第一級(jí)某位數(shù)據(jù)
        const oneFind = catalogueList.find(v=>{return v.id == twoFind.pid});
        // 第二級(jí)數(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}}); // 第一級(jí)
        const oneIndex = nodes.findIndex(v=>{return v.id == oneFind.id});
  
        nodes[oneIndex].children = twoData; // 第二級(jí)
  
        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);
    },

感謝各位的閱讀，以上就是“elementui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問題怎么解決”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)elementui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問題怎么解決這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！