人力资源智能化管理项目（day04:组织架构）-CSDN博客

本文链接：https://blog.csdn.net/weixin_51591826/article/details/136086870

本文详细介绍了如何在Vue项目中使用El-Tree组件构建组织架构树形结构，包括默认展开、自定义节点结构、数据获取、递归处理、添加子部门功能、表单验证以及删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject

觉得有帮助的同学，可以点心心支持一下哈

树组件应用

<!-- 展示树形结构 -->
      <!-- default-expand-all默认展开所有节点 -->
      <el-tree default-expand-all :data="depts" :props="defaultProps" />

depts: [
        {
          name: '传智教育',
          children: [
            {
              name: '总裁办'
            },
            {
              name: '行政部'
            },
            {
              name: '人事部',
              children: [
                {
                  name: '财务核算部'
                },
                {
                  name: '税务管理部'
                },
                {
                  name: '薪资管理部'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        label: 'name', // 要显示的字段的名字
        children: 'children' // 读取子节点的字段名
      }

树组件自定义结构

        <!-- 节点结构 -->
        <el-row
          style="width: 100%; height: 40px"
          type="flex"
          justify="space-between"
          align="middle"
        >
          <el-col>传智教育</el-col>
          <el-col :span="4"
            ><span class="tree-manager">管理员</span>
            <el-dropdown>
              <!-- 显示区域内容 -->
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right" />
              </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>



 .tree-manager {
  width: 50px;
  display: inline-block;
  margin: 10px;
}

节点作用域插槽

<!-- 节点结构 -->
        <!-- v-slot="{node,data}"只能作用在template -->
        <template v-slot="{ data }">
          <el-row
            style="width: 100%; height: 40px"
            type="flex"
            justify="space-between"
            align="middle"
          >
            <el-col>{
  { data.name }}</el-col>
            <el-col :span="4"
              ><span class="tree-manager">{
  { data.managerName }}</span>
              <el-dropdown>
                <!-- 显示区域内容 -->
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <!-- 下拉菜单内容 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                  <el-dropdown-item>编辑部门</el-dropdown-item>
                  &