新增功能编辑功能数据回填显示详情不准确的三种修复方式控制统一弹窗删除功能表单校验

用el-tree组件配合插槽完成主体布局


<el-tree
    :data="list"
    :default-expand-all="true"
  >
    <!-- 作用域插槽 data拿到的是每一个子节点的对象 -->
    <!-- 
      #default === slot-scope
      什么时候用到作用域插槽？父组件中如果想使用子组件中的数据进行自定义内容的渲染 (类似于table 单元格数据渲染)
    -->
    <template #default="{ data }">
      <el-row
        type="flex"
        justify="space-between"
        align="middle"
        style="height: 40px; width: 100%;"
      >
        <el-col :span="20">
          <span>{{ data.name }}</span>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end">
            <!-- 两个内容 -->
            <el-col>{{ data.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>编辑部门</el-dropdown-item>
                  <el-dropdown-item>删除部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </template>
 </el-tree>

el-tree的基本使用

树形组件依赖一份结构为树形嵌套的数据结构
data 中默认 label 为节点标签的文字，children 为子节点 (可以通过 props 修改默认配置 )


<script>
export default {
  data() {
    return {
     // 依赖一份树形数据
list: [{
  name: '财务部',
  manager: '刘备'
  children: [
  	{
  		name: '财务核算部',
  		manager: '张飞'
		},
    {
       name: '税务核算部',
       manager: '关羽'
    }
   ]
}]
    }
  }
}
</script>