element-ui動態(tài)級聯(lián)選擇器回顯問題詳解(二十多行代碼搞定)
場景描述
后臺返回類目數(shù)組,其中有一級類目;二級類目,三級類目;這種情況下如何回顯數(shù)據(jù)
效果圖如下:
先給大家展示一些數(shù)據(jù)結(jié)構(gòu),后面會給大家一一講解;尤其是回顯那部分
數(shù)據(jù)結(jié)構(gòu)如下:
- id:自己的id
- level:等級
- pid:父級id,0位第一級
- name:名字
[ { id:1, level:0,pid:0,name:'測試1' }, { id:2, level:0,pid:0,name:'測試2' }, { id:11, level:1,pid:1,name:'測試1-1' }, { id:12, level:2,pid:11,name:'測試1-1-1' } ]
先貼上html部分
<el-cascader :props="categoryProps" v-model="cascaderData"></el-cascader>
然后再貼上data數(shù)據(jù)中的部分
這兒需要注意幾個點:
label、value需要改為你數(shù)據(jù)結(jié)構(gòu)一致的字段;
lazyLoad函數(shù)中的node有許多參數(shù),如果目前的不能滿足你的需求;你可以查看里面的一些參數(shù)是否有你需要的數(shù)值;
現(xiàn)在data中的lazyLoad函數(shù)主要是一些默認(rèn)值;
cascaderData: '12', categoryProps: { emitPath: false, label:'name', // 字段必須統(tǒng)一 value:'id', // 字段必須統(tǒng)一 lazy: true, lazyLoad (node, resolve) { const { level,value } = node; console.log(value); let nodes = []; if (level == 0) { // 第一級 nodes = catalogueList.filter(v=>{return v.level == 0}); }else { // 后面兩級 nodes = catalogueList.filter(v=>{return v.pid == value}); }; resolve(nodes.map(v=>({ id: v.id, name: v.name, leaf: level >= 2 }))); } }, // 級聯(lián)選擇器顯示數(shù)據(jù)
回顯的方法:
將以下方法賦值給lazyLoad函數(shù)即可實現(xiàn)回顯了;
邏輯:
- cascaderData:是選擇的參數(shù)最后一級id
- value:我們在選擇是(鼠標(biāo)點擊選擇的)會觸發(fā)并返回id,如果沒有選擇點擊,則返回undefined(我們就在這兒進行判斷是回顯還是手動觸發(fā))
- 先說回顯:threeFind:我們根據(jù)有的最后一級id(cascaderData),去查找改數(shù)據(jù)并查詢到他父級(twoFind);然后根據(jù)他父級查找到(第三級)的所有數(shù)據(jù)(threeData)
- 然后根據(jù)二級數(shù)據(jù)(twoFind)去查找一級(oneFind),然后根據(jù)一級(oneFind)查找到二級的所有數(shù)據(jù);一級不用查(level==0)全是
- 這個時候開始將對應(yīng)(二級,三級)的數(shù)據(jù)放到children下面;children是默認(rèn)的值;會自動去查找
- 在放置第三級的數(shù)據(jù)的時候需要注意一個值:leaf,為true時就是結(jié)束;也必須寫這個;否則選擇器不會顯示,但是展開的時候是顯示狀態(tài)
- 現(xiàn)在回顯也完成了;但是我們從二級或者一級選擇分類的時候,會出現(xiàn)一級或者二級數(shù)據(jù)跑到二級或者三級目錄下等清楚;這個時候就需要將選中的數(shù)據(jù)查找到
- 然后將其子集的數(shù)據(jù)查找出來;并判斷如果是第三級就leaf:true;即可完成
- 趕緊去試試吧!
setLazyLoad(node, resolve) { const { level,value } = node; const cascaderData = this.cascaderData; // 第一級數(shù)據(jù) let nodes = []; nodes = catalogueList.filter(v=>{return v.level == 0}); // 選中的第三級某位數(shù)據(jù) const threeFind = catalogueList.find(v=>{return v.id == cascaderData}); if (value) { // 查詢數(shù)據(jù) const unknownFind = catalogueList.find(v=>v.id == value); if (level == 1) { let twoData = catalogueList.filter(v=>v.pid == unknownFind.id); nodes = twoData; // 第二級 }else if (level == 2) { let threeData = catalogueList.filter(v=>v.pid == unknownFind.id); nodes = threeData.map(v=>{return {id:v.id,name:v.name,level:v.level,leaf:true}}); // 第三級 }; }else { // 選中的第二級某位數(shù)據(jù) let twoFind = catalogueList.find(v=>v.id == threeFind.pid); // 第三級數(shù)據(jù) let threeData = catalogueList.filter(v=>v.pid == twoFind.id); // 選中的第一級某位數(shù)據(jù) const oneFind = catalogueList.find(v=>{return v.id == twoFind.pid}); // 第二級數(shù)據(jù) let twoData = catalogueList.filter(v=>{return v.pid == oneFind.id}); // nodes = nodes.map(v=>{return {id:v.id,name:v.name,level:v.level}}); // 第一級 const oneIndex = nodes.findIndex(v=>{return v.id == oneFind.id}); nodes[oneIndex].children = twoData; // 第二級 const twoIndex = nodes[oneIndex].children.findIndex(v=>v.id == twoFind.id); nodes[oneIndex].children[twoIndex].children = threeData.map(v=>{ // 第三季 return { id:v.id, name:v.name, level:v.level, leaf: true, } }); } resolve(nodes); },
總結(jié)
到此這篇關(guān)于element-ui動態(tài)級聯(lián)選擇器回顯問題解決的文章就介紹到這了,更多相關(guān)element-ui動態(tài)級聯(lián)選擇器回顯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2中provide/inject的使用與響應(yīng)式傳值詳解
Vue中 Provide/Inject實現(xiàn)了跨組件的通信,下面這篇文章主要給大家介紹了關(guān)于vue2中provide/inject的使用與響應(yīng)式傳值的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09vue實現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)
這篇文章主要介紹了vue實現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09如何利用Vue3+Element?Plus實現(xiàn)動態(tài)標(biāo)簽頁及右鍵菜單
標(biāo)簽頁一般配合菜單實現(xiàn),當(dāng)你點擊一級菜單或者二級菜單時,可以增加對應(yīng)的標(biāo)簽頁,當(dāng)你點擊對應(yīng)的標(biāo)簽頁,可以觸發(fā)對應(yīng)的一級菜單或者二級菜單,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Element?Plus實現(xiàn)動態(tài)標(biāo)簽頁及右鍵菜單的相關(guān)資料,需要的朋友可以參考下2022-11-11Vue+OpenLayers?創(chuàng)建地圖并顯示鼠標(biāo)所在經(jīng)緯度(完整代碼)
這篇文章主要介紹了Vue+OpenLayers?創(chuàng)建地圖并顯示鼠標(biāo)所在經(jīng)緯度,本文使用的是高德地圖,結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11