工作中,后端给我们的代码是这样的
可是在工作中我需要的数据是这样的,这个是element.ui中的数据
思路分析:
1.一级数据的相同点是pid为''
2.二级数据和一级数据的相同点是pid和一级数据的id相同
3.第一步先声明一个空数组
4.先筛选出一级数据
5.递归这个函数筛选出二级数据
6.筛选出二级数据赋值给有二级数据的一级
7.给arr添加数据并return返回
递归
function toTree(list, value) {
const arr = []
list.forEach((item) => {
if (item.pid === value) {
const children = toTree(list, item.id)
if (children.length > 0) {
item.children = children
}
arr.push(item)
}
})
return arr
}
复制代码
描述:由于后端返回的数据是列表型数据,第一次传递的参数是列表数据和"",
因为所有一级部门的pid都为"",这样遍历数组就可以找出所有一级部门,
第二次传递的参数是列表数据和item.id(一级部门的id作为二级部门的子id),
声明一个空数组,每遍历得到一个一级部门就pushdao这个数组中,每遍历一个二级部门,
则给对应的一级部门新增chidren属性,把二级部门数据赋值给这个chidren,
最后返回这个数组,也就是得到了这个树形数组
如下
数据结构
// 封装函数将列表型数据转换成树形数据结构
// list:要转换的数据
// value:根数据
--定义函数
export function transListToTree(list, value) {
console.log(list)
// 声明一个空数组
const arr = []
// 循环这个数组
list.forEach(item => {
// 筛选
if (item.pid === value) {
// 重新调用这个函数
const children = transListToTree(list, item.id)
if (children.length > 0) {
item.children = children
}
arr.push(item)
}
})
return arr
}
--调用函数
transListToTree(depts, '')