Vue 人资 实战篇五 组织架构页面 递归函数的调用、树形结构、效验规则、利用ref调用子组件的方法、通过debugger调试、加载进度条的使用

1.0 组织架构树形结构布局

目标：使用element-UI组件布局组织架构的基本布局

1. 一个企业的组织架构是该企业的灵魂，组织架构多常采用树形金字塔式结构，本章节，我们布局出页面的基本结构

1.1 实现组织架构的头部内容

1. 首先实现头部的结构，采用element的**行列布局

   <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col>
            <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <el-col>
                <!-- 下拉菜单 element -->
                <el-dropdown>
                  <span>
                    操作<i class="el-icon-arrow-down" />
                  </span>
                  <!-- 下拉菜单 -->
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      
样式
<style scoped>
.tree-card {
   
  padding: 30px  140px;
  font-size:14px;
}
</style>

1.2 实现树形的静态组织架构

1. 实现树形的结构，采用element的 tree组件
2. 我们首先实现静态数据的组织架构

 <!--放置一个属性   这里的props和我们之前学习的父传子 的props没关系-->
 <el-tree :data="departs" :props="defaultProps" />
export default {
   
  data() {
   
    return {
   
      defaultProps: {
   
        label: 'name'
      },
      departs: [{
    name: '总裁办', children: [{
    name: '董事会' }] },
        {
    name: '行政部' }, {
    name: '人事部' }]
    }
  }
}

3. 接下来，对每个层级节点增加显示内容，此时需要用到tree的插槽

 <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
          <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
          <el-row slot-scope="{ data }" type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%">
            <el-col>
              <!-- 左侧内容 -->
              <span>{
   {
    data.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <el-col>{
   {
    data.manager }}</el-col>
                <el-col>
                  <!-- 放置下拉菜单 -->
                  <el-dropdown>
                    <!-- 内容 -->
                    <span>操作
                      <i class="el-icon-arrow-down" />
                    </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>

            <!-- 右侧内容 -->
            </el-col>
          </el-row>        </el-tree>
<script>
export default {
   
  data() {
   
    return {
   
      departs: [{
    name: '总裁办', manager: '曹操', children: [{
    name: '董事会', manager: '曹丕' }] },
        {
    name: '行政部', manager: '刘备' },
        {
    name: '人事部', manager: '孙权' }],
      defaultProps: {
   
        label: 'name' // 表示 从这个属性显示内容
      }
    }
  }
}
</script>

2.0 将树形的操作内容单独抽提成组件

目标： 将树形的操作内容单独抽提成组件

通过封装，代码看上去更加紧凑，简洁，这就是封装的魅力

本节任务：将树形内容单独抽提组件

2.1 封装单独的树操作栏组件

1. 通过第一个章节，我们发现，树形的顶级内容实际和子节点的内容是一致的，此时可以将该部分抽提成一个组件，节省代码
2. 组件 src/views/departments/components/tree-tools.vue

<template>
  <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width: 100%">
    <el-col>
      <!-- 名称应该变成 对应的节点中的name -->
      <span>{
   {
    treeNode.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <!-- 两个内容 -->
        <el-col>{
   {
    treeNode.manager }}</el-col>
        <el-col>
          <!-- 下拉菜单 element -->
          <el-dropdown>
            <span>
              操作<i class="el-icon-arrow-down" />
            </span>
            <!-- 下拉菜单 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>添加子部门</el-dropdown-item>
              <el-dropdown-item>编辑部门</el-dropdown-item>
              <el-dropdown-item>删除部门</el-dropdown-item>
            <<