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

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. 构建组织结构树的部门组件，部门下可能存在子部门和员工，所以组件内部再调用部门组件和员工组件，以达到循环递归的效果。