实现组织架构的头部内容
首先实现头部的结构,采用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