李奶奶的，困擾了我兩個(gè)周的問題終于在今天得到了解決。神坑~~

如果你有幸刷到這篇文章，恭喜你，困擾你的問題總算有解決方法了。本篇文章解決你所有級(jí)聯(lián)懶加載回顯的問題和修改樣式不生效問題。

問題描述：

我的需求是調(diào)了三個(gè)下拉框接口進(jìn)行關(guān)聯(lián)。在form表單里進(jìn)行選擇傳值都是沒問題的。剛開始數(shù)據(jù)少?zèng)]有出現(xiàn)問題。第二天數(shù)據(jù)多了測(cè)試提了個(gè)bug，三級(jí)聯(lián)動(dòng)竟然不顯示數(shù)據(jù)了。

然后就是兩個(gè)周的探索，夜不能寐啊。兩個(gè)周啊??！

網(wǎng)上給的方法各式各樣。甚至有說回顯必須有options，使用遞歸把options的數(shù)據(jù)填好進(jìn)行回顯。純屬扯淡。

附上代碼

html：

        <el-cascader
          v-model="data.eventComboBoxValue"
          :props="cascaderProps"
          clearable
        />

js：

 cascaderProps() {
      return {
        lazy: true,
        lazyLoad: this.lazyLoad
      };
    }
methods:{
 async lazyLoad(node, resolve) {
      let level = node.level;
      let result;
      switch (level) {
        case 0: // 類型
          let initRes = await eventList();
          result = initRes.data.pageResult.list;
          break;
        case 1: //一級(jí)目錄
          let firstParams = {
            upstreamId: node.data.value
          };
          let firstRes = await eventList(firstParams);
          result = firstRes.data.pageResult.list;
          break;
        case 2: // 二級(jí)目錄
          let secondParams = {
            eventTypeId: node.data.value
          };
          let secondRes = await eventList(secondParams);
          result = secondRes.data.pageResult.list;
          result.forEach(item => {
            item.leaf = level >= 2;
          });
          break;
        default:
          result = [];
          break;
      }
      resolve(result);
    },
}

這樣是一般寫法，很多小伙伴這樣寫也不會(huì)有問題，但是看下請(qǐng)求數(shù)據(jù)的列表。某一個(gè)列表重復(fù)請(qǐng)求了多次。解決方法是在請(qǐng)求前加一層判斷，已經(jīng)有數(shù)據(jù)了就不要重復(fù)請(qǐng)求了。

if (node.children && node.children.length > 0) return;

到了這一步還是沒有回顯。仔細(xì)看你的數(shù)據(jù)是不是有重復(fù)項(xiàng)？比如第一層和第二層id一樣？恭喜你，遇到了和我一樣的問題。出現(xiàn)問題的原因是。cascader的每一項(xiàng)id都不能重復(fù)，否則就不會(huì)進(jìn)行下一層的加載了。和后端商量了幾種解決方案。給出最完美的方案。

請(qǐng)求列表的時(shí)候多傳一個(gè)自定義字段，我傳的是fromLinkage:1，讓后端知道我是在調(diào)級(jí)聯(lián)列表，這么做是為了不影響其他模塊下拉列表的功能。

 然后后端返回一個(gè)唯一標(biāo)識(shí)避免重復(fù)，我們采用的是拼接列表名稱。

第一層返回

第二層返回

第三層返回 

把返回的這一項(xiàng)作為你的value值，這樣每一層的value都是唯一了。完美解決問題。正?；仫@。

至此有用過級(jí)聯(lián)el-cascader的伙伴都能解決問題了。那么點(diǎn)贊出門左轉(zhuǎn)，可以摸魚啦~~

以下內(nèi)容偏傻瓜式教學(xué)，供尚不能解決問題的新人參考。

綜上所述，我點(diǎn)擊第二層的時(shí)候傳參應(yīng)該傳id:3，但是現(xiàn)在傳了id:'upstreamid3'，因?yàn)槟阍瓉淼膙alue值已經(jīng)綁定成了后端返回的key。value是從node中拿出來的，那我能不能拿到之前的3傳給后端呢？當(dāng)然可以。

 只需在你rosolve的數(shù)組里添加一個(gè)自定義字段，下一輪你就能從node中拿到你存的flag了！

第二層、第三層請(qǐng)求傳給后端。

總結(jié)：一般這種回顯會(huì)出現(xiàn)在編輯、查看彈窗或者路由跳轉(zhuǎn)中，如果你的代碼還有問題不能回顯。彈窗或者新的頁面中中加個(gè)v-if每次關(guān)閉銷毀，獲取到詳情再創(chuàng)建即可。

如果解決了你的問題請(qǐng)點(diǎn)贊！點(diǎn)贊！讓我看看有多少被這個(gè)問題折磨的鐵子們~~~

另外新版本的element級(jí)聯(lián)會(huì)有一頁數(shù)據(jù)太多展示不下的問題，修改樣式竟然沒生效，我們會(huì)使用的是less，less穿透使用/deep/，scss穿透使用::v-deep。都不生效。

最終解決方案是把scope去掉，成功解決~

到此這篇關(guān)于vue中el-cascader三級(jí)聯(lián)動(dòng)懶加載回顯問題解決的文章就介紹到這了,更多相關(guān)vue el-cascader懶加載回顯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論