第一种方式:
/**
* 树形数据转换
* @param {*} data list数据
* @param {*} id 主键ID
* @param {*} pid 上级ID
* @param childrenKey 子list数据的key
*/
function treeDataTranslate (data, id = 'id', pid = 'parentId', childrenKey = 'children') {
let res = []
let temp = {}
for (let i = 0; i < data.length; i++) {
temp[data[i][id]] = data[i]
}
for (let k = 0; k < data.length; k++) {
if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
if (!temp[data[k][pid]][childrenKey]) {
temp[data[k][pid]][childrenKey] = []
}
if (!temp[data[k][pid]]['_level']) {
temp[data[k][pid]]['_level'] = 1
}
data[k]['_level'] = temp[data[k][pid]]._level + 1
temp[data[k][pid]][childrenKey].push(data[k])
} else {
res.push(data[k])
}
}
return res
}
第二种方式:
function toTree(list) {
let tree = []
const oneLevels = list.filter(item => item.parentId == 0) // 一级数据
if(oneLevels.length) {
oneLevels.forEach(item => {
let o = JSON.parse(JSON.stringify(item))
if(!o.children) o.children = []
let twoLevels = list.filter(arr => arr.parentId == o.id) // 二级数据
if(twoLevels.length) {
twoLevels.forEach(t => {
let obj = JSON.parse(JSON.stringify(t))
obj.children = []
let threeLevels = list.filter(e => e.parentId == obj.id) // 三级数据
if(threeLevels.length) {
threeLevels.forEach(element => {
let ele = JSON.parse(JSON.stringify(element))
obj.children.push(ele)
})
}
o.children.push(obj)
})
}
tree.push(o)
})
}
return tree
}
正常数据情况下,使用第一种就可以了,第一种性能要比第二种好得多。
但是有时候你会碰见很奇葩的数据,如下图:
类似于这种的,就有点奇葩
大家根据情况灵活处理
测试数据:
var treeList = [
{
title: '系统管理',
parentName: '',
parentId: 0,
id: 1,
},
{
title: '角色新增',
parentName: '角色管理',
parentId: 22,
id: 221,
},
{
title: '角色编辑',
parentName: '角色管理',
parentId: 22,
id: 222,
},
{
title: '角色删除',
parentName: '角色管理',
parentId: 22,
id: 223,
},
{
title: '用户新增',
parentName: '用户管理',
parentId: 33,
id: 331,
},
{
title: '菜单新增',
parentName: '菜单管理',
parentId: 11,
id: 111,
},
{
title: '菜单编辑',
parentName: '菜单管理',
parentId: 11,
id: 112,
},
{
title: '用户管理',
parentName: '系统管理',
parentId: 0,
id: 33,
},
{
title: '菜单管理',
parentName: '系统管理',
parentId: 1,
id: 11,
},
{
title: '菜单删除',
parentName: '菜单管理',
parentId: 11,
id: 113,
},
{
title: '用户编辑',
parentName: '用户管理',
parentId: 33,
id: 332,
},
{
title: '角色管理',
parentName: '系统管理',
parentId: 1,
id: 22,
},
{
title: '用户删除',
parentName: '用户管理',
parentId: 33,
id: 333,
}
]