快捷導(dǎo)航

解決element?ui?cascader?動(dòng)態(tài)加載回顯問題

更新時(shí)間：2022年08月18日 11:20:30 作者：web前端面試小助手

這篇文章主要介紹了element?ui?cascader?動(dòng)態(tài)加載回顯問題解決方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

elementui是基于vue2.0的組件庫(kù)，專為開發(fā)人員、設(shè)計(jì)人員而設(shè)計(jì)的；可以快速搭建項(xiàng)目框架，集成了界面樣式，先給大家介紹下element ui cascader 動(dòng)態(tài)加載回顯問題解決方法。

props: {
	lazy: true,
	async lazyLoad(node, resolve) {
	}
 }

但是當(dāng)我賦值給cascader的時(shí)候，cascader卻不顯示了。只要重新加載下cascader組件就行。

<el-cascader v-if="isShowAddressInfo" v-model="form.addressInfo" :props="props"></el-cascader>

async updateAddress(data) {
   this.addressInfo=['廣東省', '佛山市', '順德區(qū)', '龍江鎮(zhèn)']
   this.isShowAddressInfo = false;
   // 這里搞個(gè)定時(shí)器重新載入一下組件就可以觸發(fā)組件拉取數(shù)據(jù)
   setTimeout(() => {
     this.isShowAddressInfo = true;
   }, 500);
 }

補(bǔ)充：史上最簡(jiǎn)單的el-cascader動(dòng)態(tài)加載回顯的解決辦法

教大家最簡(jiǎn)單的element-ui的el-cascader級(jí)聯(lián)選擇器回顯方法，特別是對(duì)動(dòng)態(tài)加載時(shí)特別簡(jiǎn)單，不過確實(shí)有點(diǎn)辣眼睛。廢話不多說了，就是使用el-cascader標(biāo)簽的:placeholder屬性來回顯內(nèi)容。例如：我要回顯示園區(qū)名稱，代碼如下：

<el-cascader
? ? ? ? ? ? ? ? v-if="isShowInfo"
? ? ? ? ? ? ? ? ref="parkCascader"
? ? ? ? ? ? ? ? v-model="parkOptions"
? ? ? ? ? ? ? ? :props="parkParams"
? ? ? ? ? ? ? ? @change="handleChange"
? ? ? ? ? ? ? ? :show-all-levels="true"
? ? ? ? ? ? ? ? :placeholder="form.parkName"
? ? ? ? ? ? ? ? style="width: 100%"
? ? ? ? ? ? ? ? clearable>
? ? ? ? ? ? ? </el-cascader>

原理很簡(jiǎn)單，就是在要回顯時(shí)把form.parkName的屬性內(nèi)容準(zhǔn)備好就行，不過，這樣回顯內(nèi)容字體顏色比較淡，但無傷大雅！還有一點(diǎn)就，如果在修改el-cascader的內(nèi)容時(shí)如果是清空的話，別忘了把form.parkName的內(nèi)容也清空哦，不然顯示內(nèi)容會(huì)與實(shí)際不符。最后需要注意的話，雖然回顯內(nèi)容沒有問題，但是parkOptions的值需要按套路正確操作。

到此這篇關(guān)于element ui cascader 動(dòng)態(tài)加載回顯問題解決方法的文章就介紹到這了,更多相關(guān)element ui cascader 動(dòng)態(tài)加載回顯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: