封装单独的树操作栏组件

文章目录

• • 概要
  • 整体架构流程

概要

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

整体架构流程

<template>
  <!-- 组织架构  放一个el-tree -->
    <el-row
      type="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>