.sync双向绑定 native用法 split() 扁平数据转换树形结构 对组织架构进行渲染 新增部门信息的实现功能

在标题后加title

document.title='人力资源' + to.meta.title

 document.title = getPageTitle(to.meta.title)

 在

import defaultSettings from '@/settings'

const title = defaultSettings.title || 'Vue Admin Template'

export default function getPageTitle(pageTitle) {
  // '员工管理'
  if (pageTitle) {
    return ` ${title}- ${pageTitle}`
  }
  return `${title}`
}

样式修改

通过:a.sync实现双向绑定

实现原理

在子组件标签中定义函数 通过父向子传值 

在子组件中props接收函数

在子组件标签中通过this.$emit('函数名',值)子向父传值

在父组件的子标签中获取函数

扫描二维码关注公众号，回复： 14490155 查看本文章

sync和v-model区别

.sync与v-model区别是

• 相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。

• 区别点：

  • 格式不同。 v-model="num", :num.sync="num"

  • v-model： @input + value

  • :num.sync: @update:num

  • v-model只能用一次；.sync可以有多个。

native 自定义子组件标签上 事件不触发时在前面加.native

 

组织架构-头部布局

获取部门数据渲染

在api中新建文件 定义请求接口

在组建中页面一加载发送请求 定义函数 发送请求

通过插槽展示数据

扁平的数据进行树形处理

数据展示

<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>

在src/utils/index.js文件中，补充一个函数tranListToTreeData

在departments.vue中，引入函数tranListToTreeData

1.遍历list数组给每一个对象添加children:[]

2.传建一个空对象map ,建立映射关系 遍历数据

// 将平铺的数据转化为树形结构的数据
export function tranListTotreeList(list) {
  const map = {}
  list.forEach(item => {
    item.children = []
    map[item.id] = item
// 把item.id作为属性名 吧item作为属性值
// id 2c: {id: '2c', pid: '', name: '财务部', children: Array(2)}
  })
  console.log(list)
  console.log(map)
  // 3. 遍历数据，生成最终的树形结构
  const treeList = []
  list.forEach(item => {
    // 1. 找关系，找出父级的对象，如果找到父级对象，将item，添加父级的对象的chilren里面
    // 2. 判断是否是子级数据对象
    const parent = map[item.pid]
    if (parent) {
      // 子级数据对象，二级数据加入到父级对象parent的chilren中
      parent.children.push(item)
    } else {
      // 3. 一级的数据对象，一级数据对象 直接加入到treeList中
      treeList.push(item)
    }
  })
  return treeList
}

给添加和编辑添加弹框加子部门 

 在src/departments目录下，新增一个文件：deptDialog.vue，

将deptDialog.vue，引入父组件departments.vue父组件中

子组件弹窗铺设

 表单中绑定的数据项如下：这里内容与后端接口文档保持一致

<template>
  <el-form ref="deptForm" label-width="120px">
    <el-form-item label="部门名称">
      <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门编码">
      <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门负责人">
      <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
        <el-option value="1" label="小美丽" />
        <el-option value="2" label="大漂亮" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍">
      <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      }
    }
  },
  methods: {
    // 确定
    hSubmit() {},
    // 取消
    hCancel() {}
  }
}
</script>

<style>

</style>

在父组件操作  控制子组件弹窗的显示和隐藏  showDialog

获取简单的员工信息 渲染部门负责人

获取简单公司员工列表

在employees.js中定义接口函数

在depDialog.vue中 按需导入函数

定义函数loadEmployeeSimple()发送请求存储信息

页面一加载获取数据

在el-select组件中循环渲染部门负责人

<el-form-item label="部门负责人" prop="manager">
  <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
    <el-option v-for="item in employees" :key="item.id" :value="item.username" :label="item.username" />
  </el-select>
</el-form-item>

 

组织架构-新增-实现添加

新增数据   实现添加

封装新增部门的api模块 src/api/departments.js

定义接口函数addDepartments传参(data) 新增子部门

父组件中点击添加子部门时 保存当前的id 显示弹层  更新当前操作的id为curId   将更新后的id通过父传子 传给子组件

子组件中接收id  按需导入 新增接口函数   定义doAdd函数实现新增功能  关闭对话框 刷新页面

定义success事件 通过子传父

在父组件接收定义事件@success='hSuccess'  定义hSuccess函数

在hSuccess函数中关闭弹层刷新数据

图解 新增实现流程