Vue中用递归简单处理数据不是树形数据

本文已参与[新人创作礼]活动，一起开启掘金创作之路。

0.虚构一个数组arr

var arr = [
  { id: '1', num: '', name: 'a' },
  { id: '2', num: '2', name: 'b' },
  { id: '1', num: '2', name: 'c' },
  { id: '2', num: '2', name: 'd' },
  { id: '2', num: '1', name: 'e' },
  { id: '2', num: '', name: 'f' }
]

1. 封装函数，声明一个数组用于储存得到处理后的树形数据的数组

```js
   funtion fn(arr,num = ""){
      let newArr = []
      return newArr
     }
```js

2. 循环遍历arr数组判断num条件是否为"",为空则添加进第一层（注：arr数组中存放的对象都要设置自定义属性名num，用做树形数据判断条件）

funtion fn(arr,num = ""){
let newArr = []
arr.froEach((item)=>{
   if(item.num===num){//num为""
     newArr.push(item)  
   }
 })
 return newArr
}

3. 第二层筛选，将num赋值为item.id然后进行上一步操作，最后得出的数组x若为[]则表示当前的item没有第二层，否则让son添加item的自定义属性children中，即为第二层

funtion fn(arr,num = ""){
let newArr = []
arr.froEach((item)=>{
   if(item.num===num){
     let son=fn(arr,item.id)
        item.children=son
     newArr.push(item)  
   }
 })
 return newArr
}

4. 简易写法，使用第三方插件处理数据

下包array-to-tree
引入
import arrayToTree from 'array-to-tree'
导出
export function fn(arr) {
  return arrayToTree(arr, {
    parentProperty: 'num',
    customID: 'id'
  })
}