vue?ElementUI級聯(lián)選擇器回顯問題解決
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ù),但采用了懶加載+遠程數(shù)據(jù)的方式構(gòu)建選項數(shù)據(jù),此時級聯(lián)組件的結(jié)構(gòu)數(shù)據(jù)并未生成,此時僅有選中后的數(shù)據(jù)而沒有選項數(shù)據(jù),因此導(dǎo)致了級聯(lián)選擇器沒有數(shù)據(jù)可供顯示,也就導(dǎo)致了數(shù)據(jù)不回顯的問題。 【解決方案】 ① 前端渲染完整的選項數(shù)據(jù),此方案需要前端渲染的數(shù)據(jù)量極大,可能導(dǎo)致頁面崩潰,不建議采用此方式處理; ② 僅渲染選中后的數(shù)據(jù),即僅構(gòu)建選中后的選項結(jié)構(gòu),后端返回的數(shù)據(jù)結(jié)構(gòu)進行處理后依然可以配合懶加載+遠程數(shù)據(jù)的方式(需要對渲染生成的數(shù)據(jù)進行去重,避免和遠程訪問的數(shù)據(jù)重復(fù))
2. 解決問題
借助Cascader 級聯(lián)選擇器組件的options
屬性,構(gòu)建選項結(jié)構(gòu)配合v-model
即可實現(xiàn)數(shù)據(jù)回顯,如果想配合懶加載+遠程數(shù)據(jù),需要指定級聯(lián)組件的屬性信息。
{ "label": "浙江省", "value": 12321 "children": [{ "label": "杭州市", "value": 4565 }] }
【實現(xiàn)方式】
<el-cascader v-model='data' :props='cascadeProps' :options='cascadeOptions' filterable ></el-cascader>
cascadeProps: { multiple: true, checkStrictly: true, // 啟用懶加載 lazy: true, // 遠程數(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é)點 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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于Vue sessionStorage實現(xiàn)保留搜索框搜索內(nèi)容
這篇文章主要介紹了基于Vue sessionStorage實現(xiàn)保留搜索框搜索內(nèi)容,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06vue中的vue-print-nb如何實現(xiàn)頁面打印
這篇文章主要介紹了vue中的vue-print-nb如何實現(xiàn)頁面打印,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue 按照創(chuàng)建時間和當前時間顯示操作(剛剛,幾小時前,幾天前)
這篇文章主要介紹了Vue 按照創(chuàng)建時間和當前時間顯示操作(剛剛,幾小時前,幾天前),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09