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

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

問題描述：

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

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

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

附上代碼

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: //一級目錄
          let firstParams = {
            upstreamId: node.data.value
          };
          let firstRes = await eventList(firstParams);
          result = firstRes.data.pageResult.list;
          break;
        case 2: // 二級目錄
          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);
    },
}

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

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

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

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

 然后后端返回一個唯一標識避免重復，我們采用的是拼接列表名稱。

第一層返回

第二層返回

第三層返回 

把返回的這一項作為你的value值，這樣每一層的value都是唯一了。完美解決問題。正常回顯。

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

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

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

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

第二層、第三層請求傳給后端。

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

如果解決了你的問題請點贊！點贊！讓我看看有多少被這個問題折磨的鐵子們~~~

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

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

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

最新評論