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

 更新时间:2019年07月03日 16:03:33   作者:不疯魔不成活   我要评论

这篇文章主要介绍了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递归组件实现组织架构树和选人功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

最新评论