Vue用递归实现扁平数据转树形结构

树形结构认识

实现树形的结构，用element-ui的tree组件， 如图效果

data是组成树形数据的关键，如下的数据便能构建树形数据

     [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }]

树形组件属性

参数	说明	类型	可选值	默认值
default-expand-all	是否默认展开所有节点	boolean	—	—
data	展示数据	array	—	—
node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	String	—	—
props	配置选项，具体看下表	object	—	—

props属性

参数	说明	类型	可选值	默认值
label	指定节点标签为节点对象的某个属性值	string, function(data, node)	—	—
children	指定子树为节点对象的某个属性值	string	—	—
disabled	指定节点选择框是否禁用为节点对象的某个属性值	boolean, function(data, node)	—	—
isLeaf	指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效	boolean, function(data, node)	—	—

将数组数据转化成树形结构

通过接口获取到的数据都是扁平数据，转化成树形数据，一般用到递归算法

第一种方法-递归

/** *
 *
 *  将列表型的数据转化成树形数据 => 递归算法
 *  找二级的上级(其实就是一级)
 *  拿到一级的id和二级的pid来比较
 *  如果相等，说明该二级就是该一级的下一级
 *  再根据一级的id找二级
 * ***/
 function listToTree(list, id) {
  let arr = []
  list.forEach(item => {
   //注意数据pid和id的数据类型是否一致
    if (item.pid === id) {
      // 找到之后 就要去找 item 下面有没有二级
      item.children = listToTree(list, item.id)  
      arr.push(item) // 将内容加入到数组中
    }
  })
  return arr
}

第二种方法-过滤

    //这种方法其实跟递归思路差不多
    listToTree(arr) {
    //第一次过滤，先把一级过滤出来
      const data = arr.filter((value) => {
      //第二次过滤，把子级以及后代都过滤出来
      value.children = arr.filter((item) =>value.id === item.pid)
      // 这里的''是父级pid
      return value.pid === ''
      })
      return data
    },

这样一来，树形数据就有了