处理成树形结构
let data = [
{
"menu_id": "1",
"parent_id": "0",
"menu_code": "001",
"menu_name": "系统管理"
}, {
"menu_id": "2",
"parent_id": "1",
"menu_code": "002",
"menu_name": "高级详情页"
}, {
"menu_id": "3",
"parent_id": "1",
"menu_code": "003",
"menu_name": "表单"
}, {
"menu_id": "4",
"parent_id": "1",
"menu_code": "004",
"menu_name": "示例"
}, {
"menu_id": "5",
"parent_id": "0",
"menu_code": "005",
"menu_name": "菜单"
}, {
"menu_id": "6",
"parent_id": "5",
"menu_code": "006",
"menu_name": "关于"
}
]
function formatTree (obj) {
let copyedObj = JSON.parse(JSON.stringify(obj)) // 深拷贝源数据
let data = copyedObj.filter(parent => {
let findChildren = copyedObj.filter(child => {
return Number(parent.menu_id )=== Number(child.parent_id)
})
findChildren.length > 0 ? parent.children = findChildren : parent.children = []
return Number(parent.parent_id) === 0 // 返回顶层,依据实际情况判断这里的返回值
})
return data
}
树形结构扁平化
let treeDatas = [
{
id: 1,
pid: 0,
name: 'name1',
value: 'value1',
child: [
{
id: 2,
pid: 1,
name: 'name2',
value: 'value2'
},
{
id: 3,
pid: 1,
name: 'name3',
value: 'value3'
}
]
},
{
id: 4,
pid: 0,
name: 'name4',
value: 'value4',
child: [
{
id: 5,
pid: 4,
name: 'name5',
value: 'value5'
},
{
id: 6,
pid: 4,
name: 'name6',
value: 'value6'
}
]
}
]
/**
*
* @param {Array} arrs 树形数据
* @param {string} childs 树形数据子数据的属性名,常用'children'
* @param {Array} attrArr 需要提取的公共属性数组(默认是除了childs的全部属性)
* @returns
*/
function extractTree(arrs,childs,attrArr){
let attrList = [];
if(!Array.isArray(arrs)&&!arrs.length)return [];
if(typeof childs !== 'string')return [];
if(!Array.isArray(attrArr)||Array.isArray(attrArr)&&!attrArr.length){
attrList = Object.keys(arrs[0]);
attrList.splice(attrList.indexOf(childs), 1);
} else {
attrList = attrArr;
}
let list = [];
const getObj = (arr)=>{
arr.forEach(function(row){
let obj = {};
attrList.forEach(item=>{
obj[item] = row[item];
});
list.push(obj);
if(row[childs]){
getObj(row[childs]);
}
})
return list;
}
return getObj(arrs);
}
// 调用
extractTree(treeDatas, 'child', ['id', 'name'])
结果如下: