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

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

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

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

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

但是當我賦值給cascader的時候，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;
   // 這里搞個定時器重新載入一下組件就可以觸發(fā)組件拉取數(shù)據(jù)
   setTimeout(() => {
     this.isShowAddressInfo = true;
   }, 500);
 }

補充：史上最簡單的el-cascader動態(tài)加載回顯的解決辦法

教大家最簡單的element-ui的el-cascader級聯(lián)選擇器回顯方法，特別是對動態(tài)加載時特別簡單，不過確實有點辣眼睛。廢話不多說了，就是使用el-cascader標簽的:placeholder屬性來回顯內容。例如：我要回顯示園區(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>

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

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

您可能感興趣的文章: