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 相关文章推荐
js获取input标签的输入值实现代码
Aug 05 Javascript
Node.js文件操作详解
Aug 16 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
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 Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Python基于select实现的socket服务器
2016/04/13 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
Python中collections模块的基本使用教程
2018/12/07 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
大学生入党推荐书范文
2014/05/17 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers