树形组件

src/api/departments.js

@@ -0,0 +1,7 @@
+import request from '@/utils/request'
+
+export function getDepartments() {
+  return request({
+    url: '/company/department'
+  })
+}

src/views/departments/componets/tree-tools.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width:100%;">
+    <el-col>
+      <strong v-if="isRoot">{{ treeNode.name }}</strong>
+      <span v-else>{{ 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 v-if="!isRoot">编辑部门</el-dropdown-item>
+              <el-dropdown-item v-if="!isRoot">删除部门</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  props: {
+    treeNode: {
+      type: Object,
+      required: true
+    },
+    isRoot: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/departments/index.vue

@@ -2,37 +2,43 @@
   <div class="dashboard-container">
     <div class="app-container">
       <el-card class="tree-card">
-        <!-- 用了一个行列布局 -->
-        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
-          <el-col>
-            <strong>xxx股份有限公司</strong>
-          </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>
+        <!-- 用了行列布局 -->
+        <!-- 1. 第一行 公司信息-->
+        <tree-tools :tree-node="company" :is-root="true" />
+        <!-- 2. 树型控件 -->
+        <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
+          <!-- 作用域插槽 -->
+          <tree-tools slot-scope="{data}" :tree-node="data" /><!-- 父传子-->
+        </el-tree>
       </el-card>
     </div>
   </div>
 </template>
 
 <script>
+import treeTools from './componets/tree-tools.vue'
+import { getDepartments } from '@/api/departments'
 export default {
+  components: { treeTools },
+  data() {
+    return {
+      company: {},
+      departs: [],
+      defaultProps: {
+        label: 'name',
+        children: 'children'
+      }
+    }
+  },
+  async created() {
+    const res = await getDepartments()
+    console.log(res)
+    this.departs = res.depts
+    this.company = {
+      name: 'xx股份有限公司' || res.companyName,
+      manager: '负责人'
+    }
+  }
 
 }
 </script>