对于Element组件里面的Tree 树形控件获取到的数据进行数据结构的转换

我们用到的Element中Tree树形组件的数据基本是这种结构的

而我们从后台获取到的数据结构基本是如下所示的（不带children的）

但是数据之间会有关联，比如 id 会跟  parentId 相等，所以我们直接调用下面这种方法即可

注：第一种是 vue3 + ts 写的；第二种是 vue2（自己稍加修改即可）

// 1、 vue3 + ts 改变数据结构的方法，让其与之相匹配
const changeTree = (list: any, rootValue: string): any[] => {
  const arr: any = []
  list.forEach((item: any) => {
    if (item.parentId === rootValue) {
      arr.push(item)
      const children = changeTree(list, item.id)
      item.children = children
    }
  })
  return arr
}

// 2、 vue2 
const changeTree = (list, rootValue) => {
  const arr = []
  list.forEach((item) => {
    if (item.parentId === rootValue) {
      arr.push(item)
      const children = changeTree(list, item.id)
      item.children = children
    }
  })
  return arr
}


// 对照我模拟的数据去修改树形结构对应的props
const defaultProps = {
  children: 'children',
  label: 'name',
}

// 这里的newArr赋值给树形组件上的data属性即可正常展示
const newArr = changeTree(testArr, 'root')
console.log(newArr)

运行结果：

到此为止了，如果想看方法里面的代码解释可以继续往下看

------------------------------------------------------------------------------

这里我们运用到了递归算法，可以很方便处理：数据层级很大，且数据之间有关联的数组

1、后台获取到的数据肯定相当庞大，首先排除了返回原数组的说法（map方法）

2、所以我们先定义函数，创建新数组，返回新数组（这里的 list 是我们传入的数组、rootValue 是我们选择的父节点的值）

3、随后遍历传入的数组，寻找 rootValue 和 parentId 匹配的数据，将其推送给新的数组

4、随后利用递归算法

 const arr: any = []
  list.forEach((item: any) => {
    if (item.parentId === rootValue) {
      arr.push(item)
      const children = changeTree(list, item.id)
      item.children = children
    }
  })

这时候会有人思考，先push进去，再 item.children = children 会不会有问题， 因为我们的item是对象（引用数据类型），修改里面的值是没关系的，因为地址不会发生改变。