element-ui中el-cascader動態(tài)加載和默認值詳解
剛解決了這個問題，趁熱趕快拿出來涼涼，明天早上起來估計會忘
下拉框的選擇和默認值對于我來說一直都是個讓人頭疼的事，倒不是有多么難，而是很繁瑣。
要保證有值，還要有顯示的文字。表單提交后，再回過頭編輯還要顯示出來選擇的項。
進入正題吧，我看別人寫的文章也非常討厭巴拉巴拉一堆沒用的。
首先el-cascader最常用的是顯示省市區(qū)，所有省市區(qū)三四千項一下子加載出來總會有個卡頓的過程，所以我一般用動態(tài)加載，這個element的文檔和例子很清楚了。
這是我代碼中的一部分，盡可能的去掉了多余的代碼
<el-cascader ref="areas" v-model="address.area_ids" :options="options" :props="props" separator="/" />
data() {
return {
options: [],
address: {
area: [],
area_ids: [],
value: '',
lat: '',
lng: ''
},
props: {
lazy: true, //動態(tài)加載開關
lazyLoad(node, resolve) { //動態(tài)加載函數(shù)
const { level,value,label} = node;
get("../city/get", {
parentid: value
}).then((res) => {
if (res.state == 'success') {
var data = res.data;
data.map(item => {
item.leaf = item.child == "0" //leaf如果是true就結(jié)束了，意味著沒有下一級
return item;
})
resolve(data);
} else {
resolve([]);
}
})
}
}
}
},正常選擇沒問題。一般剛開始的options默認的是第一級的數(shù)組
最頭疼的部分，在編輯表單時要顯示出來前面已經(jīng)選擇過的項，也就是回顯默認值，首先保證v-mode的值是長度是3的數(shù)組（結(jié)合情況，不一定非要是3），一定保證[省,市,區(qū)]順序正確，我昨天大意寫錯了市的id，檢查了一天沒發(fā)現(xiàn)問題。
另外，既然要顯示默認值，肯定也要給el-cascader一個默認的options,要保證是這種結(jié)構
[
{
'value':'1',
'label':'河南',
'leaf':false,//不帶leaf，選項后面沒有向右的箭頭，下面的自行補充
'children':[{
'value':'11',
'label':'鄭州',
'children':[
{
'value':'111',
'label':'中原區(qū)'
},
{
'value':'112',
'label':'二七區(qū)'
}
]
},{
'value':'12',
'label':'洛陽'
}]
},
{
'value':'2',
'label':'河北',
}
]應該很清晰了，就是保證所選路徑的上下級和平級數(shù)據(jù)完整，為什么要完整，因為還有下面一個問題。
在options處理完后，默認值應該就可以正常顯示了。
但是當再更換地區(qū)市，選了一下“鄭州”后發(fā)現(xiàn)，鄭州的子級重復了（選“河南”也一樣），這也好理解，說明是鄭州的子級又加載了一遍并且填充到下級的選項組里了，新加載的和默認的重復了。這畢竟不完美，做程序員慢慢有了強迫癥了，扒了扒element的源碼，問題很好解決，只是element官方?jīng)]有簡單明了的說出來。
在處理完options和v-model后，要處理選中項的加載狀態(tài)，否則還會重新加載一次。
//上面的代碼自行補充
this.$nextTick(_=>{
var node=this.$refs.areas.getCheckedNodes(); //獲取當前選中節(jié)點
if(node&&node[0]&&node[0].pathNodes){//選中節(jié)點的所有父節(jié)點
for(var i=0;i<node[0].pathNodes.length;i++){
node[0].pathNodes[i].loaded=true; //節(jié)點的加載狀態(tài)設為true，就不會再加載了
}
}
})至此大功告成
總結(jié)
到此這篇關于element-ui中el-cascader動態(tài)加載和默認值的文章就介紹到這了,更多相關el-cascader動態(tài)加載和默認值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
眾所周知：目前可視化大屏,視頻播放等常見功能都需要用到全屏,本文將使用兩種技術實現(xiàn)全屏功能的封裝,讓不同技術棧的同學都可以輕松掌握,好了,讓我們來實現(xiàn)一個既兼容性強又易于管理的全屏功能組件吧,需要的朋友可以參考下2024-08-08
解決vue項目F5刷新mounted里的函數(shù)不執(zhí)行問題
今天小編就為大家分享一篇解決vue項目F5刷新mounted里的函數(shù)不執(zhí)行問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue3實現(xiàn)provide/inject的示例詳解
Vue3 的 Provide / Inject 的實現(xiàn)原理其實就是巧妙利用了原型和原型鏈來實現(xiàn)的。本文將通過示例為大家介紹下provide/inject的具體實現(xiàn)，需要的可以參考一下2022-11-11
這篇文章主要介紹了Vue操作DOM解決顯示位置問題,文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-12-12
vue填坑之webpack run build 靜態(tài)資源找不到的解決方法
今天小編就為大家分享一篇vue填坑之webpack run build 靜態(tài)資源找不到的解決方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
最近做的項目用到了全選全不選功能，于是我就自己動手寫了一個，基于vue使用監(jiān)聽實現(xiàn)全選反選功能，具體實例代碼大家參考下本文2018-07-07
這篇文章主要介紹了解決vant-UI庫修改樣式無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)記事本功能，記事本可以進行添加刪除事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
Vue3實現(xiàn)動態(tài)高度的虛擬滾動列表的示例代碼
虛擬滾動列表是一種優(yōu)化長列表渲染性能的技術,通過只渲染可視區(qū)域內(nèi)的列表項,減少DOM的渲染數(shù)量,本文就來介紹一下Vue3實現(xiàn)動態(tài)高度的虛擬滾動列表的示例代碼,具有一定的參考價值,感興趣的可以了解一下2025-01-01
vue前端框架vueuse的useScroll函數(shù)使用源碼分析
這篇文章主要為大家介紹了vueuse的useScroll函數(shù)源碼分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08