首先你得确保后端传过来的数据中 子级必须表明他父级是谁 ,例如 parent指向的父级的id,如果没有父级则parent为0
let data = [
{
id: 1,
parent: 0,
name: 'a',
subitems: [
{
id: 2,
parent: 1,
name: 'b',
subitems: []
},
{
id: 3,
parent: 1,
name: 'c',
subitems: []
}
]
},
{
id: 4,
parent: 0,
name: 'd',
subitems: [
{
id: 5,
parent: 4,
name: 'e',
subitems: []
}
]
}
]
一、形成一维结构
数据拿到了以后需要将他扁平化,就是将他的所有子级拿出来形成一维结构,代码如下
// 使用扩展运算符将多维数组扁平化变成一维数组
function flatten (data) {
return [].concat(...data.map(item => [].concat(item, ...flatten(item.subitems))))
}
data = flatten(data)
扁平化以后的数据就会变成这样
二、标明层级
拿到了一维数据以后需要给每个子项标明他的层级,默认第一层为0级。
使用find函数找到他的父级,并用level表示他的层级
function find (item, level = 0) {
return !item.parent ? level : find(data.filter(parentItem => parentItem.id === item.parent)[0], ++level)
}
data.forEach(item => {
item.level = find(item)
})
console.log(data)
打印结果
这样就能够得到一个标明层级的一维结构
三、结论
要看懂上面的函数,需要先理解函数的递归,知道js的一些函数map、contact、forEach以及js的箭头函数,然后了解vue的扩展运算符(...)
js的学习推荐廖大佬的网站JavaScript教程 - 廖雪峰的官方网站 (liaoxuefeng.com)
最后希望各位小伙伴们能够早日成为大佬 ~