el-tree树形结构 可以进行编辑新增等功能

<template>
  <div class="container">
    <div class="app-container">
      <!-- 展示树形结构 -->
      <el-tree :data="depts" :props="defaultProps" default-expand-all>
       <!-- v-solt="{node,data}" 只能作用在template -->
       <template v-slot="{data}">
         <!-- 节点结构 -->
         <el-row
          style="width: 100%; height: 40px"
          type="flex"
          align="middle"
          justify="space-between"
        >
          <el-col>{{ data.name }}</el-col>
          <el-col :span="4">
            <span class="tree-manger">{{ data.managerName }}</span>
            <el-dropdown>
                <!-- 显示区内容 -->
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <!-- 下拉菜单选项 -->
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>添加子部门</el-dropdown-item>
                <el-dropdown-item>编辑部门</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
       </template>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  name: "Department",
  data() {
    return {
      depts: [
        {
          name: "某公司",
          managerName:'管理员',
          children: [
            { name: "总裁办",managerName:'张三' },
            { name: "行政部",managerName:'李四' },
            { name: "人事部", managerName:'王五'},
          ],
        },
      ],
      defaultProps: {
        children: "children", //读取子节点的字段名
        label: "name", //要显示字段的名字
      },
    };
  },
};
</script>

<style scoped>
.app-container {
  padding: 30px 140px;
  font-size: 14px;
}
.tree-manger {
    width: 50px;
    display: inline-block;
    margin: 10px;
}
</style>

对后端传过来的数据转换成树形结构（递归转化树形结构）

在util下的index.js中写处理方法

export function transListToTreeData(list, rootValue) {
  const arr = []
  list.forEach(item => {
    if (item.pid === rootValue) {
      // 找到了匹配的节点
      // 当前节点的id 和 当前节点的子节点的pid是想等的
      const children = transListToTreeData(list, item.id) // 找到的节点的子节点
      item.children = children  // 将子节点赋值给当前节点
      arr.push(item)
    }
  })
  return arr
}

 调用方法

async getDepartment() {
      const result = await getDepartment()
      this.depts = transListToTreeData(result, 0)
    }