element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問題詳解(二十多行代碼搞定)
場景描述
后臺(tái)返回類目數(shù)組,其中有一級(jí)類目;二級(jí)類目,三級(jí)類目;這種情況下如何回顯數(shù)據(jù)
效果圖如下:
先給大家展示一些數(shù)據(jù)結(jié)構(gòu),后面會(huì)給大家一一講解;尤其是回顯那部分
數(shù)據(jù)結(jié)構(gòu)如下:
- id:自己的id
- level:等級(jí)
- pid:父級(jí)id,0位第一級(jí)
- 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ù)中的部分
這兒需要注意幾個(gè)點(diǎn):
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) { // 第一級(jí) nodes = catalogueList.filter(v=>{return v.level == 0}); }else { // 后面兩級(jí) nodes = catalogueList.filter(v=>{return v.pid == value}); }; resolve(nodes.map(v=>({ id: v.id, name: v.name, leaf: level >= 2 }))); } }, // 級(jí)聯(lián)選擇器顯示數(shù)據(jù)
回顯的方法:
將以下方法賦值給lazyLoad函數(shù)即可實(shí)現(xiàn)回顯了;
邏輯:
- cascaderData:是選擇的參數(shù)最后一級(jí)id
- value:我們?cè)谶x擇是(鼠標(biāo)點(diǎn)擊選擇的)會(huì)觸發(fā)并返回id,如果沒有選擇點(diǎn)擊,則返回undefined(我們就在這兒進(jìn)行判斷是回顯還是手動(dòng)觸發(fā))
- 先說回顯:threeFind:我們根據(jù)有的最后一級(jí)id(cascaderData),去查找改數(shù)據(jù)并查詢到他父級(jí)(twoFind);然后根據(jù)他父級(jí)查找到(第三級(jí))的所有數(shù)據(jù)(threeData)
- 然后根據(jù)二級(jí)數(shù)據(jù)(twoFind)去查找一級(jí)(oneFind),然后根據(jù)一級(jí)(oneFind)查找到二級(jí)的所有數(shù)據(jù);一級(jí)不用查(level==0)全是
- 這個(gè)時(shí)候開始將對(duì)應(yīng)(二級(jí),三級(jí))的數(shù)據(jù)放到children下面;children是默認(rèn)的值;會(huì)自動(dòng)去查找
- 在放置第三級(jí)的數(shù)據(jù)的時(shí)候需要注意一個(gè)值:leaf,為true時(shí)就是結(jié)束;也必須寫這個(gè);否則選擇器不會(huì)顯示,但是展開的時(shí)候是顯示狀態(tài)
- 現(xiàn)在回顯也完成了;但是我們從二級(jí)或者一級(jí)選擇分類的時(shí)候,會(huì)出現(xiàn)一級(jí)或者二級(jí)數(shù)據(jù)跑到二級(jí)或者三級(jí)目錄下等清楚;這個(gè)時(shí)候就需要將選中的數(shù)據(jù)查找到
- 然后將其子集的數(shù)據(jù)查找出來;并判斷如果是第三級(jí)就leaf:true;即可完成
- 趕緊去試試吧!
setLazyLoad(node, resolve) { const { level,value } = node; const cascaderData = this.cascaderData; // 第一級(jí)數(shù)據(jù) let nodes = []; nodes = catalogueList.filter(v=>{return v.level == 0}); // 選中的第三級(jí)某位數(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; // 第二級(jí) }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}}); // 第三級(jí) }; }else { // 選中的第二級(jí)某位數(shù)據(jù) let twoFind = catalogueList.find(v=>v.id == threeFind.pid); // 第三級(jí)數(shù)據(jù) let threeData = catalogueList.filter(v=>v.pid == twoFind.id); // 選中的第一級(jí)某位數(shù)據(jù) const oneFind = catalogueList.find(v=>{return v.id == twoFind.pid}); // 第二級(jí)數(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}}); // 第一級(jí) const oneIndex = nodes.findIndex(v=>{return v.id == oneFind.id}); nodes[oneIndex].children = twoData; // 第二級(jí) 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動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問題解決的文章就介紹到這了,更多相關(guān)element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- element-ui時(shí)間日期選擇器限制選擇范圍的幾種場景
- vue項(xiàng)目element-ui級(jí)聯(lián)選擇器el-cascader回顯的問題及解決
- 解決element-ui的el-select選擇器的@blur事件失效的坑
- 詳解element-ui日期時(shí)間選擇器的日期格式化問題
- element-ui 時(shí)間選擇器限制范圍的實(shí)現(xiàn)(隨動(dòng))
- vue2.0 element-ui中el-select選擇器無法顯示選中的內(nèi)容(解決方法)
- vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解
相關(guān)文章
vue項(xiàng)目中使用AvueJs的詳細(xì)教程
Avue.js是基于現(xiàn)有的element-ui庫進(jìn)行的二次封裝,簡化一些繁瑣的操作,核心理念為數(shù)據(jù)驅(qū)動(dòng)視圖,主要的組件庫針對(duì)table表格和form表單場景,這篇文章給大家介紹了vue項(xiàng)目中使用AvueJs的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧2022-10-10vue2中provide/inject的使用與響應(yīng)式傳值詳解
Vue中 Provide/Inject實(shí)現(xiàn)了跨組件的通信,下面這篇文章主要給大家介紹了關(guān)于vue2中provide/inject的使用與響應(yīng)式傳值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)
這篇文章主要介紹了vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09詳解如何使用webpack在vue項(xiàng)目中寫jsx語法
本篇文章主要介紹了詳解如何使用webpack在vue項(xiàng)目中寫jsx語法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11如何利用Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁及右鍵菜單
標(biāo)簽頁一般配合菜單實(shí)現(xiàn),當(dāng)你點(diǎn)擊一級(jí)菜單或者二級(jí)菜單時(shí),可以增加對(duì)應(yīng)的標(biāo)簽頁,當(dāng)你點(diǎn)擊對(duì)應(yīng)的標(biāo)簽頁,可以觸發(fā)對(duì)應(yīng)的一級(jí)菜單或者二級(jí)菜單,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(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é)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11