Vue 渲染树状图

 改变数据布局

子节点的pid 等于父节点的id

用element组件库实现

原数据：

{
  id: '1',
  name: '张三',
  pid: '0'
},
{
  id: '2',
  name: ' 李四',
  pid: '0'
},
{
  id: 'a1',
  name: '王五',
  pid: '1'
},
{
  id: 'a2',
  name: '王小五',
  pid: '1'
}

转换后：

{
  id: '1',
  name: '张三',
  pid: '0',
  children: [
    {
      id: 'a1',
      name: '王五',
      pid: '1'
    },
    {
      id: 'a2',
      name: '王小五',
      pid: '1'
    }
  ]
},
{
  id: '2',
  name: ' 李四',
  pid: '0'
}

展示

封装一个方法 utils/terrData.js

export const getDepartmentsData = (list, parentId) => {
  const result = []
  list.forEach(item => {
    if (item.pid === parentId) {
      const children = getDepartmentsData(list, item.id)
      if (children) {
        item.children = children
      }
      result.push(item)
    }
  })
  return result
}

导入 方法，用getDepartmentsData（）过滤获取的数据

得到tableData 数组

import { getDepartmentsData } from '@/utils/terrData'

export default {
  data () {
    return {
      tableData: []
    }
  },

  methods: {
    async getPermissionListApi () {
      // 获取数据
      const res = await getPermissionList()
      console.log(res)
      // 过滤获取的数据
      const tableData = getDepartmentsData(res, '0')
      this.tableData = tableData
      console.log(this.tableData)
    },
  }
}