把后端传过来的平铺数组数据处理为tree组件需要的树形数据

实现树形组件-处理树形结构

目标

把后端传过来的平铺数组数据处理为tree组件需要的树形数据

分析

这个需求是通用的（其它的项目也会用到的），所以，我们可以封装成工具，单独放在utils下边。

补充工具函数

在**src/utils/index.js**文件中，补充一个函数tranListToTreeData，如下：

 * 把平铺的数组结构转成树形结构
 *
 * [
 *  {id:"01", pid:"",   "name":"老王" },
 *  {id:"02", pid:"01", "name":"小张" }
 * ]
 * 上面的结构说明： 老王是小张的上级
 */
export function tranListToTreeData(list) {
  // 1. 定义两个变量
  const treeList = [], map = {}

  // 2. 建立一个映射关系，并给每个元素补充children属性.
  // 映射关系: 目的是让我们能通过id快速找到对应的元素
  // 补充children：让后边的计算更方便
  list.forEach(item => {
    if (!item.children) {
      item.children = []
    }
    map[item.id] = item
  })

  // 循环
  list.forEach(item => {
    // 对于每一个元素来说，先找它的上级
    //    如果能找到，说明它有上级，则要把它添加到上级的children中去
    //    如果找不到，说明它没有上级，直接添加到 treeList
    const parent = map[item.pid]
    // 如果存在上级则表示item不是最顶层的数据
    if (parent) {
      parent.children.push(item)
    } else {
      // 如果不存在上级 则是顶层数据,直接添加
      treeList.push(item)
    }
  })
  // 返回
  return treeList
}

使用工具函数处理数据

在departments.vue中，引入函数tranListToTreeData

import { tranListToTreeData } from '@/utils' 并使用

      try {
        const res = await getDepartments()
        console.log(res)
        // 由于业务中传智教育的pid是:-1，它是最高级的节点
        // shift 从数组头部取出一个元素
        const root = res.data.depts.shift()
        console.log(root)
        // 用工具函数把 平铺的数组转成 树型数据
        this.list = tranListToTreeData(res.data.depts)
      } catch (err) {
        console.log(err)
      }
    }

总结

 * 把平铺的数组结构转成树形结构
 *
 * [
 *  {id:"01", pid:"",   "name":"老王" },
 *  {id:"02", pid:"01", "name":"小张" }
 * ]
 * 上面的结构说明： 老王是小张的上级
 */
// 方法一有缺陷
export function tranListToTreeData1(list) {
  // 1. 定义两个变量
  const treeList = []; const map = {}

  // 2. 建立一个映射关系，并给每个元素补充children属性.
  // 映射关系: 目的是让我们能通过id快速找到对应的元素
  // 补充children：让后边的计算更方便
  list.forEach(item => {
    if (!item.children) {
      item.children = []
    }
    map[item.id] = item
  })

  // 循环
  list.forEach(item => {
    // 对于每一个元素来说，先找它的上级
    //    如果能找到，说明它有上级，则要把它添加到上级的children中去
    //    如果找不到，说明它没有上级，直接添加到 treeList
    const parent = map[item.pid]
    // 如果存在上级则表示item不是最顶层的数据
    if (parent) {
      parent.children.push(item)
    } else {
      // 如果不存在上级 则是顶层数据,直接添加
      treeList.push(item)
    }
  })
  // 返回
  return treeList
}

// 方法二递归写法
export function tranListToTreeData(list, pid) {
  var newList = []
  list.forEach(item => {
    if (item.pid === pid) {
    //两个参数
      var child = tranListToTreeData(list, item.id)
      // console.log(child.length)
      if (child) {
        item.children = child
      }
      newList.push(item)
    }
  })
  return newList
}
// 方法三下包Array to tree