Vue之Element級聯(lián)選擇器多選傳值以及回顯方式(樹形結構)
更新時間：2023年07月03日 11:00:33 作者：A?.?阿冰
這篇文章主要介紹了Vue之Element級聯(lián)選擇器多選傳值以及回顯方式(樹形結構)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue Element級聯(lián)選擇器多選傳值以及回顯
后臺需要的數據格式：‘a’, ‘a1’, ‘b’, ‘b1’(字符串以逗號分隔)
后臺返回的數據：同上
級聯(lián)組建
<el-cascader ? :options="industrialList" ? placeholder="請選擇產業(yè)鏈" ? :props="industrialProps" ? @change="changeIndustrial" ? clearable ? v-model="form.industrialChain" ></el-cascader>
組建選擇處理
changeIndustrial (val) {
? let ids = [];
? val.forEach((item) => {
? ? ids.push(item[item.length - 1]);
? })
? this.industrialChainResult = ids.join(',');
}處理后臺返回數據進行回顯
codes: 后臺返回的逗號分隔的字符串。this.industrialList：從后臺取回來渲染級聯(lián)多選的樹形結構數據。categoryResultList：樹形結構子集字段名
? ? // 級聯(lián)回顯
? ? industrialChinaShow (codes) {
? ? ? let echoTreeArr = [];
? ? ? let eachAry = codes.split(',')
? ? ? let itemAry = [];//分類樹組件，每一項的code數組
? ? ? // 遞歸分類數據
? ? ? let recursionCategory = (data) => {
? ? ? ? let len = data.length;
? ? ? ? for (let i = 0; i < len; i++) {//循環(huán)data參數，匹配回顯的code
? ? ? ? ? itemAry.push(data[i].code);//構建分類樹數組項,入棧
? ? ? ? ? for (let j = 0; j < eachAry.length; j++) {//遍歷子節(jié)點分類code，拼湊成數組項code，并終止循環(huán)
? ? ? ? ? ? if (eachAry[j] == data[i].code) {//匹配到子節(jié)點code
? ? ? ? ? ? ? echoTreeArr.push(JSON.parse(JSON.stringify(itemAry)));//push進樹分類數據
? ? ? ? ? ? ? eachAry.splice(j, 1);//刪除以匹配到的code
? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? if (eachAry.length <= 0) {//所有回顯code匹配完成后，跳出循環(huán)
? ? ? ? ? ? break;
? ? ? ? ? } else if (data[i].categoryResultList && data[i].categoryResultList.length > 0) {// 如果存在子分類，遞歸繼續(xù)
? ? ? ? ? ? recursionCategory(data[i].categoryResultList);
? ? ? ? ? }
? ? ? ? ? itemAry.pop();//出棧
? ? ? ? }
? ? ? }
? ? ? recursionCategory(this.industrialList);//調用遞歸
? ? ? this.form.industrialChain = echoTreeArr;
? ? },在后臺返回的地方調用第三部的方法
this.industrialChinaShow(res.industrialChain) // res.industrialChain 后臺返回的'a', 'a1', 'b', 'b1'(字符串以逗號分隔)
好了 就這樣。
element-ui動態(tài)級聯(lián)選擇器回顯問題解決
場景描述
后臺返回類目數組，其中有一級類目；二級類目，三級類目；這種情況下如何回顯數據
效果圖如下：
先給大家展示一些數據結構，后面會給大家一一講解；尤其是回顯那部分
數據結構如下
id：自己的idlevel：等級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數據中的部分
這兒需要注意幾個點：label、value需要改為你數據結構一致的字段；lazyLoad函數中的node有許多參數，如果目前的不能滿足你的需求；你可以查看里面的一些參數是否有你需要的數值；現在data中的lazyLoad函數主要是一些默認值；
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)選擇器顯示數據回顯的方法
將以下方法賦值給lazyLoad函數即可實現回顯了；
邏輯：
- cascaderData：是選擇的參數最后一級id
- value：我們在選擇是（鼠標點擊選擇的）會觸發(fā)并返回id，如果沒有選擇點擊，則返回undefined（我們就在這兒進行判斷是回顯還是手動觸發(fā))
- 先說回顯：threeFind：我們根據有的最后一級id（cascaderData），去查找改數據并查詢到他父級（twoFind）；然后根據他父級查找到（第三級）的所有數據（threeData）
- 然后根據二級數據（twoFind）去查找一級（oneFind），然后根據一級（oneFind）查找到二級的所有數據；一級不用查（level==0）全是
- 這個時候開始將對應（二級，三級）的數據放到children下面；children是默認的值；會自動去查找
- 在放置第三級的數據的時候需要注意一個值：leaf，為true時就是結束；也必須寫這個；否則選擇器不會顯示，但是展開的時候是顯示狀態(tài)
- 現在回顯也完成了；但是我們從二級或者一級選擇分類的時候，會出現一級或者二級數據跑到二級或者三級目錄下等清楚；這個時候就需要將選中的數據查找到
- 然后將其子集的數據查找出來；并判斷如果是第三級就leaf:true；即可完成
- 趕緊去試試吧！
setLazyLoad(node, resolve) {
const { level,value } = node;
const cascaderData = this.cascaderData;
// 第一級數據
let nodes = [];
nodes = catalogueList.filter(v=>{return v.level == 0});
// 選中的第三級某位數據
const threeFind = catalogueList.find(v=>{return v.id == cascaderData});
if (value) {
// 查詢數據
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 {
// 選中的第二級某位數據
let twoFind = catalogueList.find(v=>v.id == threeFind.pid);
// 第三級數據
let threeData = catalogueList.filter(v=>v.pid == twoFind.id);
// 選中的第一級某位數據
const oneFind = catalogueList.find(v=>{return v.id == twoFind.pid});
// 第二級數據
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);
},總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue項目index.html中使用環(huán)境變量的代碼示例
在Vue3中使用環(huán)境變量的方式與Vue2基本相同,下面這篇文章主要給大家介紹了關于vue項目index.html中使用環(huán)境變量的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue.component的屬性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue子組件如何使用父組件傳過來的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue實現數字+英文字母組合鍵盤功能,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-12-12
本文介紹Vue2中Element UI表格自定義表頭及查詢功能實現,需通過slot-scope綁定數據,注意Vue2.6+版本改用#header語法,并提供示例代碼說明,感興趣的朋友一起看看吧2025-07-07
這篇文章主要介紹了如何使用vue3-print-nb依賴在Vue?3項目中實現頁面打印功能,提供了完整的代碼示例,大家可以根據項目需求選擇合適的打印方法,需要的朋友可以參考下2025-02-02
這篇文章主要給大家介紹了關于npm踩坑問題的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
vue中el-tree動態(tài)初始默認選中和全選實現方法
這篇文章主要給大家介紹了關于vue中el-tree動態(tài)初始默認選中和全選實現的相關資料,eltree默認選中eltree是一種常用的樹形控件,通常用于在網頁上呈現樹形結構的數據,例如文件夾、目錄、組織結構等,需要的朋友可以參考下2023-09-09
前端儲存之localStrage、sessionStrage和Vuex使用
localStorage、sessionStorage和Vuex是三種不同的客戶端存儲方式,用于在瀏覽器中保存數據,localStorage和sessionStorage都是以鍵值對的形式存儲數據,但localStorage存儲的數據在關閉瀏覽器后仍然存在2025-01-01
vue前端js實現預覽word文檔需求docx-preview方式
文章簡要介紹了使用插件docx-preview的步驟,首先需要通過npm進行安裝,在預覽時使用官方提供的文檔,本文內容較為簡略,主要是分享安裝和使用過程,供其他開發(fā)者參考2026-05-05