概要

      把公共的部分单独拆出来，封装到一个新的vue文件夹中， 里面的数据通过父传子的方式传递，子通过props接受（静态代码实现的树状图细看代码展示）

整体架构流程

<template><!-- 组织架构  放一个el-tree --><el-rowtype="flex"justify="space-between"align="middle"style="height: 40px; width: 100%"><el-col><!-- 左侧内容 --><span>{{ treeNode.name }}</span></el-col><el-col :span="4"><el-row type="flex" justify="end"><el-col>{{ treeNode.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 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 {
// 组件要对开放 属性 外部需要提供一个对象 对象里面需要有name manger// props 可以用数组接受数据  也可以用对象来接受// props { props属性： { 配置项}}props: {treeNode: {type: Object, // 数据类型require: true // 要求对方使用您的组件的时候  必须传入treeNode属性},isRoot: {type: Boolean,default: false}}
}
</script>
<style></style>

 2 父组件中通过引用，来实现，把引入的组件通过compones 注册组件 ，把组件引入到需要的地方，父组件用的时候要传入子组件需要用到的参数，就是子组件props里面申明的值

<template><div class="dashboard-container"><div class="app-container"><!-- 组织架构内容    头部 --><el-card class="tree-card"><Treetocer :tree-node="company" :is-root="true" /><!-- 组织架构  放一个el-tree --><el-tree :data="departs" :props="defaultProps" :default-expand-all="true"><!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 --><!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象--><Treetocer slot-scope="{ data }" :tree-node="data" /></el-tree></el-card></div></div>
</template>
<script>
import Treetocer from '@/views/departments/componente/tree-tools.vue'
export default {components: {Treetocer},data() {return {company: { name: '三国之协调有限公司', manager: '负责人' },departs: [{ name: '总裁办', manager: '曹操', children: [{ name: '董事会', manager: '曹丕' }] },{ name: '行政部', manager: '刘备' },{ name: '人事部', manager: '孙权' }],defaultProps: {label: 'name' // 表示 从这个属性显示内容}}}
}
</script>
<style scoped>
.tree-card {padding: 30px  140px;font-size:14px;
}
</style>