vue将树状结构转为一维结构并标明层级

首先你得确保后端传过来的数据中 子级必须表明他父级是谁 ，例如 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)

最后希望各位小伙伴们能够早日成为大佬 ~