快捷導(dǎo)航

vue?ElementUI級聯(lián)選擇器回顯問題解決

更新時間：2022年09月15日 08:31:12 作者：RealPluto

這篇文章主要介紹了vue?ElementUI級聯(lián)選擇器回顯問題解決，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下

1. 分析問題

【問題描述】使用 ElementUI 的 Cascader 級聯(lián)選擇器組件，如果使用了懶加載和動態(tài)加載數(shù)據(jù)會導(dǎo)致，在v-model中的數(shù)據(jù)據(jù)重新放到 Cascader 級聯(lián)組建后，會出現(xiàn)數(shù)據(jù)不回顯的問題。【原因分析】在級聯(lián)組件中雖然在v-model中重新傳入選中的數(shù)據(jù)，但采用了懶加載+遠(yuǎn)程數(shù)據(jù)的方式構(gòu)建選項(xiàng)數(shù)據(jù)，此時級聯(lián)組件的結(jié)構(gòu)數(shù)據(jù)并未生成，此時僅有選中后的數(shù)據(jù)而沒有選項(xiàng)數(shù)據(jù)，因此導(dǎo)致了級聯(lián)選擇器沒有數(shù)據(jù)可供顯示，也就導(dǎo)致了數(shù)據(jù)不回顯的問題。【解決方案】 ① 前端渲染完整的選項(xiàng)數(shù)據(jù)，此方案需要前端渲染的數(shù)據(jù)量極大，可能導(dǎo)致頁面崩潰，不建議采用此方式處理； ② 僅渲染選中后的數(shù)據(jù)，即僅構(gòu)建選中后的選項(xiàng)結(jié)構(gòu)，后端返回的數(shù)據(jù)結(jié)構(gòu)進(jìn)行處理后依然可以配合懶加載+遠(yuǎn)程數(shù)據(jù)的方式（需要對渲染生成的數(shù)據(jù)進(jìn)行去重，避免和遠(yuǎn)程訪問的數(shù)據(jù)重復(fù)）

2. 解決問題

借助Cascader 級聯(lián)選擇器組件的options屬性，構(gòu)建選項(xiàng)結(jié)構(gòu)配合v-model即可實(shí)現(xiàn)數(shù)據(jù)回顯，如果想配合懶加載+遠(yuǎn)程數(shù)據(jù)，需要指定級聯(lián)組件的屬性信息。

{
  "label": "浙江省",
  "value": 12321
  "children": [{
      "label": "杭州市",
      "value": 4565
   }]
}

【實(shí)現(xiàn)方式】

<el-cascader
  v-model='data'
  :props='cascadeProps'
  :options='cascadeOptions'
  filterable
  ></el-cascader>

cascadeProps: {
  multiple: true,
    checkStrictly: true,
      // 啟用懶加載
      lazy: true,
        // 遠(yuǎn)程數(shù)據(jù)訪問
        lazyLoad: async (node, resolve) => {
          const { data, level} = node
          const parentCode = level === 0 ? '000' : data.nodeCode
          const nodes = await this.getRemoteData(parentCode, level)
          // 去除重復(fù)節(jié)點(diǎn)
          let nodeFilter = nodes.filter(n => {
            if (!this.optionList.includes(n.value)) {
              return n
            }
          })
          resolve(nodeFilter)
        },
},

getRemoteData(parentCode, level) {
  return new Promise((resolve, reject) => {
    getDistrictData({ parentCode }).then((res) => {
      resolve(this.formatData(res.data, level))
    })
  })
},

  formatData(data, level) {
    let districtType = ''
    switch (level) {
      case 0:
        districtType = 'province'
        break
      case 1:
        districtType = 'city'
        break
      case 2:
        districtType = 'district'
        break
      default:
        break
    }
    return data.map((item) => {
      return {
        districtType,
        nodeCode: item.nodeCode,
        value: item.districtId,
        label: item.name,
        leaf: level >= 2,
      }
    })
  },

到此這篇關(guān)于ElementUI級聯(lián)選擇器回顯問題解決的文章就介紹到這了,更多相關(guān)ElementUI選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: