element-ui动态级联选择器回显问题详解(二十多行代码搞定）
作者：雾恋
大家在使用element-ui的时候肯定会遇到这样一个问题,就是在你使用级联选择器的回显问题,下面这篇文章主要给大家介绍了关于element-ui动态级联选择器回显问题的相关资料,需要的朋友可以参考下
场景描述
后台返回类目数组，其中有一级类目；二级类目，三级类目；这种情况下如何回显数据
效果图如下：
先给大家展示一些数据结构，后面会给大家一一讲解；尤其是回显那部分
数据结构如下：
- 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数据中的部分
这儿需要注意几个点：
label、value需要改为你数据结构一致的字段；
lazyLoad函数中的node有许多参数，如果目前的不能满足你的需求；你可以查看里面的一些参数是否有你需要的数值；
现在data中的lazyLoad函数主要是一些默认值；
cascaderData: '12',
categoryProps: {
emitPath: false,
label:'name', // 字段必须统一
value:'id', // 字段必须统一
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
})));
}
}, // 级联选择器显示数据
回显的方法：
将以下方法赋值给lazyLoad函数即可实现回显了；
逻辑：
- cascaderData：是选择的参数最后一级id
- value：我们在选择是（鼠标点击选择的）会触发并返回id，如果没有选择点击，则返回undefined（我们就在这儿进行判断是回显还是手动触发)
- 先说回显：threeFind：我们根据有的最后一级id（cascaderData），去查找改数据并查询到他父级（twoFind）；然后根据他父级查找到（第三级）的所有数据（threeData）
- 然后根据二级数据（twoFind）去查找一级（oneFind），然后根据一级（oneFind）查找到二级的所有数据；一级不用查（level==0）全是
- 这个时候开始将对应（二级，三级）的数据放到children下面；children是默认的值；会自动去查找
- 在放置第三级的数据的时候需要注意一个值：leaf，为true时就是结束；也必须写这个；否则选择器不会显示，但是展开的时候是显示状态
- 现在回显也完成了；但是我们从二级或者一级选择分类的时候，会出现一级或者二级数据跑到二级或者三级目录下等清楚；这个时候就需要将选中的数据查找到
- 然后将其子集的数据查找出来；并判断如果是第三级就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);
},
总结
到此这篇关于element-ui动态级联选择器回显问题解决的文章就介绍到这了,更多相关element-ui动态级联选择器回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！