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


Posted in Javascript onJuly 03, 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
   }
  }

总结

以上所述是小编给大家介绍的Vue.js递归组件实现组织架构树和选人功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 #Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 #Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
使用vue实现各类弹出框组件
Jul 03 #Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 #Javascript
使用微信SDK自定义分享的方法
Jul 03 #Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 #Javascript
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
python实现比较文件内容异同
2018/06/22 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
自我管理的活动方案
2014/08/25 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js