js递归生成树形结构
情景一：返回的数据格式为array没有层级结构 靠pid关联 需要处理数据成树状结构
参考若依框架
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} id id字段 默认 'id'
* @param {*} parentId 父节点字段 默认 'parentId'
* @param {*} children 孩子节点字段 默认 'children'
* @param {*} rootId 根Id 默认 0
*/
export function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
//对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
//循环所有项
const treeData = cloneData.filter(father => {
let branchArr = cloneData.filter(child => {
//返回每一项的子级数组
return father[id] === child[parentId]
});
branchArr.length > 0 ? father.children = branchArr : '';
//返回第一层
return father[parentId] === rootId;
});
return treeData != '' ? treeData : data;
}
//const list=this.handleTree(response.data, "menuId");
情景二：
[
{
"id": 1,
"name": "11111111楼",
"parentId": 0
},
{
"id": 2,
"name": "2楼",
"parentId": 0
},
{
"id": 4,
"name": "1楼儿子2",
"parentId": 1
},
{
"id": 6,
"name": "你是谁啊",
"parentId": 4
},
{
"id": 12,
"name": "566666",
"parentId": 2
},
{
"id": 13,
"name": "33333楼",
"parentId": 0
},
{
"id": 14,
"name": "7567566765",
"parentId": 13
},
{
"id": 15,
"name": "1312",
"parentId": 6
}
]
load() {
loadCatOptions().then(res => {//发送请求获取数据
this.catOptions = this.generateOptions(res);
console.log(this.catOptions);
})
},
generateOptions(params) {//生成Cascader级联数据
var result = [];
for (let param of params) {
if (param.parentId == 0) {//判断是否为顶层节点
var parent = {//转换成el-Cascader可以识别的数据结构
'label': param.name,
'value': param.id
}
parent.children = this.getchilds(param.id, params);//获取子节点
result.push(parent);
}
}
return result;
},
getchilds(id, array) {
let childs = new Array();
for (let arr of array) {//循环获取子节点
if (arr.parentId == id) {
childs.push({
'label': arr.name,
'value': arr.id
});
}
}
for (let child of childs) {//获取子节点的子节点
let childscopy = this.getchilds(child.value, array);//递归获取子节点
console.log(childscopy)
if (childscopy.length > 0) {
child.children = childscopy;
}
}
return childs;
},
生成后：
[
{
"children": [
{
"children": [
{
"children": [
{
"label": "1312",
"value": 15
}
],
"label": "你是谁啊",
"value": 6
}
],
"label": "1楼儿子2",
"value": 4
}
],
"label": "11111111楼",
"value": 1
},
{
"children": [
{
"label": "566666",
"value": 12
}
],
"label": "2楼",
"value": 2
},
{
"children": [
{
"label": "7567566765",
"value": 14
}
],
"label": "33333楼",
"value": 13
}
]
