Vue.js递归组件实现组织架构树和选人功能


Posted in Javascript onJuly 04, 2019

大家好!先上图看看本次案例的整体效果。

Vue.js递归组件实现组织架构树和选人功能

浪奔,浪流,万里涛涛江水永不休。如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不能容易太多。下面就手把手带您一步步拨开这个案例的层层迷雾。

实现步骤如下:

1. api构建部门和员工信息接口,vuex全局存放部门list和员工list数据信息。

api:

export default {
 getEmployeeList () {
  return {
   returncode: 0,
   message: '',
   result: [
    {
     id: 1,
     employeeName: '吴亦凡',
     departmentId: 44
    },
    {
     id: 2,
     employeeName: '鹿晗',
     departmentId: 45
    },
    {
     id: 3,
     employeeName: '孙红雷',
     departmentId: 44
    },
    {
     id: 4,
     employeeName: '周杰伦',
     departmentId: 45
    },
    {
     id: 5,
     employeeName: '张国荣',
     departmentId: 45
    },
    {
     id: 6,
     employeeName: '陈百强',
     departmentId: 45
    },
    {
     id: 7,
     employeeName: '谭咏麟',
     departmentId: 41
    },
    {
     id: 8,
     employeeName: '谷村新司',
     departmentId: 45
    },
    {
     id: 9,
     employeeName: '中岛美雪',
     departmentId: 46
    },
    {
     id: 10,
     employeeName: '周润发',
     departmentId: 47
    },
    {
     id: 14,
     employeeName: '周慧敏',
     departmentId: 58
    },
    {
     id: 13,
     employeeName: '张学友',
     departmentId: 58
    }
   ]
  }
 },
 getDepartmentList () {
  return {
   returncode: 0,
   message: '',
   result: [
    {
     id: 40,
     name: '研发一部',
     parentId: 37,
     sequence: 2
    },
    {
     id: 41,
     name: '研发二部',
     parentId: 37,
     sequence: 4
    },
    {
     id: 43,
     name: '市场',
     parentId: 0,
     sequence: 6
    },
    {
     id: 44,
     name: '销售',
     parentId: 0,
     sequence: 4
    },
    {
     id: 45,
     name: '财务',
     parentId: 0,
     sequence: 5
    },
    {
     id: 46,
     name: '研发三部',
     parentId: 37,
     sequence: 1
    },
    {
     id: 47,
     name: '研发四部',
     parentId: 37,
     sequence: 3
    },
    {
     id: 37,
     name: '研发',
     parentId: 0,
     sequence: 5
    },
    {
     id: 58,
     name: '研发一部',
     parentId: 57,
     sequence: 1
    },
    {
     id: 59,
     name: '测试',
     parentId: 0,
     sequence: 5
    },
    {
     id: 60,
     name: '测试一部',
     parentId: 59,
     sequence: 1
    },
    {
     id: 61,
     name: '测试二部',
     parentId: 59,
     sequence: 2
    },
    {
     id: 62,
     name: '研发二部',
     parentId: 57,
     sequence: 2
    }
   ]
  }
 }
}

store:

import dataApi from '@/api/data.api.js'
const state = {
 employeeList: [],
 departmentList: []
}

const getters = {
 employeeList: state => state.employeeList,
 departmentList: state => state.departmentList
}

const mutations = {
 SetEmployeeList (state, { employeeList }) {
  state.employeeList = employeeList
 },
 SetDepartmentList (state, { departmentList }) {
  state.departmentList = departmentList
 }
}

const actions = {
 getEmployeeList ({ commit }) {
  let employeeResult = dataApi.getEmployeeList()
  if (employeeResult.returncode === 0) {
   commit('SetEmployeeList', { employeeList: employeeResult.result })
  }
 },
 getDepartmentList ({ commit }) {
  let departmentResult = dataApi.getDepartmentList()
  if (departmentResult.returncode === 0) {
   commit('SetDepartmentList', { departmentList: departmentResult.result })
  }
 }
}

export default {
 state,
 getters,
 mutations,
 actions,
 namespaced: true
}

2. vue.$set为员工对象增加响应式属性checked控制是否选中,methods中创建选中方法如下:

selectEmployee () {
   var self = this
   if (self.employee.checked === undefined) {
    this.$set(self.employee, 'checked', true)
   } else {
    self.employee.checked = !self.employee.checked
   }
  }

3. computed计算属性监控文本框输入字段searchKey的变化实现左侧员工列表实时检索功能。

searchEmployeeList () {
   var self = this
   if (self.searchKey.trim() === '') {
    console.log(self.employeeList)
    return self.employeeList.filter(item => item.checked === undefined || !item.checked)
   } else {
    return self.employeeList.filter(item => (item.employeeName.indexOf(self.searchKey.trim()) !== -1) && (item.checked === undefined || !item.checked))
   }
  }

4. 构建组织结构树的部门组件,部门下可能存在子部门和员工,所以组件内部再调用部门组件和员工组件,以达到循环递归的效果。

<template>
 <li @click.stop="expandTree()">
  <a :class="lvl|level">
   <span class="expand-tree-icon">
    <i class="fa fa-caret-right" :class="{'active':department.expand}"></i>
   </span>
   <span>
    <i class="lcfont lc-department-o"></i>
   </span>
   <span class="title">
    <span>{{department.name}}</span>
    <span class="title-desc">({{allChildEmployeeList.length}}人 )</span>
    <i class="lcfont lc-add" @click.stop="selectDepartmentEmployees()" title="添加整个部门成员"></i>
   </span>
  </a>
  <ul v-show="department.expand">
   <child-employee
    v-for="(employee,index) in childEmployeeList"
    :employee="employee"
    :lvl="lvl+1"
    :key="index"
   ></child-employee>
   <child-department
    v-for="(department,index) in childDepartmentList"
    :department="department"
    :employeeList="employeeList"
    :departmentList="departmentList"
    :lvl="lvl+1"
    :key="index"
   ></child-department>
  </ul>
 </li>
</template>

5. 结构树之员工组件

<template>
 <li v-on:click.stop="selectEmployee()">
  <a class="member-item" v-bind:class="lvl|level" href="javascript:;" rel="external nofollow" >
   <div class="lc-avatar flex-se1" name="true" size="30">
    <div class="lc-avatar-30" :title="employee.employeeName">
     <span class="lc-avatar-def" style="background-color: rgb(112, 118, 142);">
      <div>{{employee.employeeName}}</div>
     </span>
     <div class="lc-avatar-name">{{employee.employeeName}}</div>
    </div>
   </div>
   <i class="lcfont" v-bind:class="{'lc-check':employee.checked}"></i>
  </a>
 </li>
</template>

6. 和上面员工的选中原理类似,控制部门节点的展开和合并也通过$set方法扩展一个响应式的expand属性。

expandTree () {
   var self = this
   if (self.department.expand === undefined) {
    self.$set(self.department, 'expand', true)
   } else {
    self.department.expand = !self.department.expand
   }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文本加密解密
Jun 23 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
老生常谈js数据类型
Aug 03 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
Vue如何清空对象
Mar 03 Vue.js
vue-cli配置flexible过程详解
Jul 04 #Javascript
vue动态配置模板 'component is'代码
Jul 04 #Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 #Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
小程序中canvas的drawImage方法参数使用详解
Jul 04 #Javascript
vue如何限制只能输入正负数及小数
Jul 04 #Javascript
Vue项目中ESlint规范示例代码
Jul 04 #Javascript
You might like
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
php生成微信红包数组的方法
2019/09/05 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
python实现随机密码字典生成器示例
2014/04/09 Python
Python中List.count()方法的使用教程
2015/05/20 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python开发简易版在线音乐播放器
2017/03/03 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
Python和Bash结合在一起的方法
2020/11/13 Python
用python制作个音乐下载器
2021/01/30 Python
品恩科技软件测试面试题
2014/10/26 面试题
初中学生期末评语
2014/04/24 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
1000字打架检讨书
2014/11/03 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript