vue?ElementUI級(jí)聯(lián)選擇器回顯問題解決
1. 分析問題
【問題描述】 使用 ElementUI 的 Cascader 級(jí)聯(lián)選擇器組件,如果使用了懶加載和動(dòng)態(tài)加載數(shù)據(jù)會(huì)導(dǎo)致,在v-model
中的數(shù)據(jù)據(jù)重新放到 Cascader 級(jí)聯(lián)組建后,會(huì)出現(xiàn)數(shù)據(jù)不回顯的問題。 【原因分析】 在級(jí)聯(lián)組件中雖然在v-model
中重新傳入選中的數(shù)據(jù),但采用了懶加載+遠(yuǎn)程數(shù)據(jù)的方式構(gòu)建選項(xiàng)數(shù)據(jù),此時(shí)級(jí)聯(lián)組件的結(jié)構(gòu)數(shù)據(jù)并未生成,此時(shí)僅有選中后的數(shù)據(jù)而沒有選項(xiàng)數(shù)據(jù),因此導(dǎo)致了級(jí)聯(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ù)的方式(需要對(duì)渲染生成的數(shù)據(jù)進(jìn)行去重,避免和遠(yuǎn)程訪問的數(shù)據(jù)重復(fù))
2. 解決問題
借助Cascader 級(jí)聯(lián)選擇器組件的options
屬性,構(gòu)建選項(xiàng)結(jié)構(gòu)配合v-model
即可實(shí)現(xiàn)數(shù)據(jù)回顯,如果想配合懶加載+遠(yuǎn)程數(shù)據(jù),需要指定級(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級(jí)聯(lián)選擇器回顯問題解決的文章就介紹到這了,更多相關(guān)ElementUI選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue element Cascader級(jí)聯(lián)選擇器解決最后一級(jí)顯示空白問題
- vue+element多選級(jí)聯(lián)選擇器自定義props使用詳解
- vue element-ui el-cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯的兩種實(shí)現(xiàn)方法
- vue項(xiàng)目element-ui級(jí)聯(lián)選擇器el-cascader回顯的問題及解決
- Vue之Element級(jí)聯(lián)選擇器多選傳值以及回顯方式(樹形結(jié)構(gòu))
- vue如何實(shí)現(xiàn)級(jí)聯(lián)選擇器功能
相關(guān)文章
VUE?項(xiàng)目如何使用?Docker+Nginx進(jìn)行打包部署
使用?Docker,你可以創(chuàng)建一個(gè)包含?Vue.js?應(yīng)用程序的容器鏡像,并在任何支持?Docker?的環(huán)境中運(yùn)行該鏡像,這篇文章主要介紹了VUE?項(xiàng)目用?Docker+Nginx進(jìn)行打包部署,需要的朋友可以參考下2024-06-06基于Vue sessionStorage實(shí)現(xiàn)保留搜索框搜索內(nèi)容
這篇文章主要介紹了基于Vue sessionStorage實(shí)現(xiàn)保留搜索框搜索內(nèi)容,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06vue中的vue-print-nb如何實(shí)現(xiàn)頁面打印
這篇文章主要介紹了vue中的vue-print-nb如何實(shí)現(xiàn)頁面打印,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前)
這篇文章主要介紹了Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09