封装递归函数将数组数据转化为树形结构

将后台返回的数组数据转换为树形结构？

经过对产品原型图分析得出，需要呈现出这样一个树形的结构(如下图)

export default {
  name: 'Department',
  data() {
    return {
      departs: [
        {
          name: '总裁办',
          managerName: 'zs',
          children: [
            {
              name: '董事会',
              managerName: 'ls'
            }
          ]
        },
        {
          name: '行政部',
          managerName: 'ww'
        },
        {
          name: '人事部',
          managerName: 'zl'
        }
      ],
      defaultProps: { label: 'name' }
    }
  }
}

1.根据后台服务器返回的原始数据是一个数组

const list = [{
  id: 'a',
  pid: '',
  name: '总裁办'
},
{
  id: 'b',
  pid: '',
  name: '行政部'
},
{
  id: 'c',
  pid: '',
  name: '财务部'
},
{
  id: 'd',
  pid: 'c',
  name: '财务核算部'
},
{
  id: 'e',
  pid: 'c',
  name: '税务管理部'
},
{
  id: 'f',
  pid: 'e',
  name: '税务管理 A 部'
},
{
  id: 'g',
  pid: 'e',
  name: '税务管理 B 部'
}]

3.合并并且找出原始数组中主心部门和下方有哪些子部门

分析确定根 ID（''），谁的 pid 等于 根 ID，我就把谁放到该id的下面一层

const list = [{
  id: 'a',
  pid: '',
  name: '总裁办'
},
{
  id: 'b',
  pid: '',
  name: '行政部'
},
{
  id: 'c',
  pid: '',
  name: '财务部',
  children: [
    {
      id: 'd',
      pid: 'c',
      name: '财务核算部'
    },
    {
      id: 'e',
      pid: 'c',
      name: '税务管理部',
      children: [
        {
          id: 'f',
          pid: 'e',
          name: '税务管理 A 部'
        },
        {
          id: 'g',
          pid: 'e',
          name: '税务管理 B 部'
        }
      ]
    }
  ]
}]

4.此时使用递归函数将数组筛选成树形的结构

export function transListToTreeData(list, id = '') {
  const arr = []
  list.forEach(item => {
    // 谁（每一个对象）的 pid 等于 根 ID，就把谁放到数组里面
    if (item.pid === id) {
      // 我添加进去的这个 item 可能还有 children，所以在添加之前
      // 要 从 list 中找谁的 pid 等于 item.id 的，把这些作为 children 的每一项，children 应该挂到  item 上面
      const children = transListToTreeData(list, item.id)
      if (children.length) {
        item.children = children
      }
      arr.push(item)
    }
  })
  return arr
}

5.此时需要将封装好的递归函数引入到代码中转换操作

import { transListToTreeData } from '@/utils'
export default {
  name: 'Department',
  data() {
    return {
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      // 后端返回的数据是数组格式的，规律可以通过 pid 和 id 组成树状的
      this.departs = transListToTreeData(await getDepartments(), 0)
    }
  }
}