本篇文章给大家分享的是有关Vue.js递归组件实现组织架构树和选人功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
创新互联公司的客户来自各行各业，为了共同目标，我们在工作上密切配合，从创业型小企业到企事业单位，感谢他们对我们的要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。专业领域包括成都网站设计、成都网站建设、电商网站开发、微信营销、系统平台开发。
实现步骤如下：
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. 构建组织结构树的部门组件，部门下可能存在子部门和员工，所以组件内部再调用部门组件和员工组件，以达到循环递归的效果。
