组织架构树形结构布局

实现组织架构的头部内容

首先实现头部的结构，采用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>
​

树形组件认识

 [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }]

实现树形的静态组织架构

由此，我们首先实现静态数据的组织架构

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

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

<template>
  <div class="dashboard-container">
    <div class="app-container">
        <!-- 实现页面的基本布局 -->
       <el-card>
         <!--省略了头部内容--> 
         <!--放置一个属性   这里的props和我们之前学习的父传子 的props没关系-->
          <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="width:100%;height:40px;">
              <!-- 左侧内容 -->
              <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-dropdo