快捷導(dǎo)航

vue中el-cascader三級聯(lián)動懶加載回顯問題解決

更新時間：2023年06月16日 11:04:23 作者：liuwenjie_

本文主要介紹了vue中el-cascader三級聯(lián)動懶加載回顯問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

問題描述：

我的需求是調(diào)了三個下拉框接口進行關(guān)聯(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ù)的列表。某一個列表重復(fù)請求了多次。解決方法是在請求前加一層判斷，已經(jīng)有數(shù)據(jù)了就不要重復(fù)請求了。

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

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

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