使用递归来格式化级联选择器的数据源
前提条件，使用element-ui的级联选择器，来实现部门和部门下的人员的选择。
在我们的项目中，需要通过级联选择器来选择部门下面的人员，获取对应的信息。那么这时候，使用级联选择器，来将每个部门分隔开选择就是一个很好的实现方法，但是怎么将后端返回的数据来整理成级联选择器能识别的格式的数据呢？
我们先来看一下级联选择器所使用的数据格式：
element-ui示例
我们可以很清晰的看到，element-ui 级联选择器需要的数据必须要的几个参数：value、label、[children]，而且是一层套一层，套娃！！！
value：当前选择项的值，也就是点击选择后返回的值；
label：选择项的展示内容；
children：选择项的子级，非必要，注意：出现这个参数，那么当前项就会通过子级的形式展示到页面中。
element-ui 级联选择器所需要的数据格式搞清楚后，我们再来看后端给我们返回的是什么样的数据格式
{
"code": 200,
"message": "获取成功",
"data": [
{
"userlist": [],
"id": "150000197902174355",
"deptname": "一级部门1",
"children": [
{
"id": "62000019830824483X",
"deptname": "一级部门1-1",
"userlist": [
{
"id": "440000198612104563",
"name": "龚芳"
}
],
"children": [
{
"id": "510000198301311141",
"deptname": "一级部门1-1-1",
"userlist": [
{
"id": "410000202005237333",
"name": "韩静"
}
]
},
{
"id": "500000200506166169",
"deptname": "一级部门1-1-2",
"userlist": [
{
"id": "140000202109289327",
"name": "董秀英"
}
]
}
]
}
]
},
{
"userlist": [
{
"id": "630000201608125257",
"name": "汪敏"
},
{
"id": "140000200703193230",
"name": "萧洋"
}
],
"id": "220000198907047358",
"deptname": "一级部门2",
"children": []
}
]
}
后端返回的数据格式
我们从中提取关键点，userlist、id、deptname、children、name，整个数据也是处于套娃的这种形式，而且不止两层
userlist：装载当前部门下的用户信息；
id：当前项的唯一值；
deptname：部门名称；
children：当前部门的下级部门；
name：用户的姓名。
后端返回的数据格式清楚之后，我们再来和我们需要整理成的数据格式来做一下对比
1、我们后端返回的数据中，多出了一个userlist，用于存放用户数据，也就是我们最终要点击的那个值
2、element-ui 中要点击的值都是放在 children 参数中，且带有children的项，会被当成有子级的选项
得出结果：我们需要把后端返回的用户数据存放到children字段中，且用户数据不带有children参数，带有children参数的为部门数据
我们可以使用递归函数，将数据加工成我们想要的格式
第一步：首先我们定义一个初始化数据的函数，来获取数据
/**
* 初始化数据
*/
init() {
this.axios({
url: "http://127.0.0.1:4523/mock/865513/dept-list",
method: "get",
})
.then((res) => {
// console.log(res.data);
if (res.data.code == 200) {
let deptData = this.recursionDept(res.data.data);
console.log(deptData);
}
})
.catch((error) => {
console.log(error);
});
},
第二部：定义处理数据的函数，通过第1步和第2步来实现
/**
* 递归部门数据
*/
recursionDept(val) {
console.log(val);
// 通过map方式来获取整理的数据
let data = val.map((item) => {
// 1、将第一层的部门数据整理出来
let childrenData = {};
childrenData.value = item.id;
childrenData.label = item.deptname;
// 2、将第一层的用户数据整理出来
childrenData.children = item.userlist.map((v) => v);
console.log(childrenData);
});
// console.log(data);
},
我们先只处理第一层的数据，将第一层的部门和用户数据整理出来，得到的结果：
第一层数据处理结果
是不是有点意思了，跟element-ui需要的数据一样了，但是我们现在还没有处理下面的子级部门，接下来我们就来处理子级部门
我们先单独把子级拆出来看一下，是不是感觉和一级部门的格式一样的。
{
"children": [
{
"id": "62000019830824483X",
"deptname": "一级部门1-1",
"userlist": [
{
"id": "440000198612104563",
"name": "龚芳"
}
],
"children": [
{
"id": "510000198301311141",
"deptname": "一级部门1-1-1",
"userlist": [
{
"id": "410000202005237333",
"name": "韩静"
}
]
}
]
}
]
}
这个时候我们就可以直接调用我们自己函数本身，添加第3步、第4步、第5步，同时，将我们整理的数据return回去
/**
* 递归部门数据
*/
recursionDept(val) {
// 通过map方式来获取整理的数据
let data = val.map((item) => {
// 1、将第一层的部门数据整理出来
let deptData = {};
deptData.value = item.id;
deptData.label = item.deptname;
// 2、将第一层的用户数据整理出来
deptData.children = item.userlist.map((v) => ({ value: v.id, label: v.name }));
// 3、判断当前项是否含有子级，且长度不为0
if (item.children && item.children.length) {
// 4、子级处理和一级数据一样，那么我们可以直接调用函数本身来进行处理
let childrenData = this.recursionDept(item.children);
// 5、将得到的子级数据和一级数据进行合并，子级数据也是放到一级数据的children字段中
deptData.children = [...deptData.children, ...childrenData];
}
return deptData;
});
return data;
}
这个时候，我们就能得到我们最终想要的数据了
最终处理完毕的数据
将得到的数据绑定到element-ui级联选择器上，就能得到我们想要的结果了，带箭头的就是有子级选项
写的不好，感谢观看，若有大佬觉得有不好的地方，欢迎指点😀
浙公网安备 33010602011771号