大家好！先上图看看本次案例的整体效果。

**浪奔，浪流，万里涛涛江水永不休。如果在日本季刊日本季刊时代来实这个功能简直有些噩梦了，但是自从前端思想发展到现在的以视图模型为主流的大背景下，来实现一个这样繁杂的功能简直不能容易太多。下面就手把手带您一步步拨开这个案例的层层迷雾。**

实现步骤如下：

1.美国石油学会(美国石油协会)构建部门和员工信息接口，vuex全局存放部门目录和员工目录数据信息。

api:

导出默认值{ getEmployeeList(){ return { return code : 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， 员工姓名： '中岛美雪，departmentId: 46 }，{ id: 10，employeeName: '周润发，departmentId: 47 }，{ id: 14，employeeName: '周慧敏，departmentId: 58 }，{ id: 13，employeeName: '张学友，departmentId: 58 } ] } }，getdepartment list(){ return {返回代码： 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:

从" @/api/data.api.js "导入dataApi const state={ employeeList :[]，部门列表：[]} const getter={ employeeList : state=state。employeeList，部门列表：状态=状态。部门列表}常量突变={ SetEmployeeList (state，{ employeeList }){ state。employeeList=employeeList }，SetDepartmentList (state，{ departmentList })vue .$set为员工对象增加响应式属性检查控制是否选中，方法中创建选中方法如下：

选择EmplOyee(){ var self=this if(self。EmplOyee。选中===未定义){这.$set(self.employee，' checked '，true)} else { self。员工。选中=！self.employee.checked } }3 .计算计算属性监控文本框输入字段搜素键字的变化实现左侧员工列表实时检索功能。

搜索employeelist(){ var self=this if(self。搜索关键字。trim()===' '){控制台。日志(自我。employeelist)返回自我。员工列表。过滤器(项目=项目。选中===未定义| |！项目。选中)} else { return self。员工列表。过滤器(项目=(项目。员工姓名。indexof(self。搜索关键字。trim())！==-1)(项。选中===未定义| |！item.checked)) } }4 .构建组织结构树的部门组件，部门下可能存在子部门和员工，所以组件内部再调用部门组件和员工组件，以达到循环递归的效果。

模板Li @点击。stop=' expandTree()' a : class=' lvl | level ' span class=' expand-tree-icon ' I class=' fa-caret-right ' : class=' { ' active ' : department。展开部门。name } }/span class=' title-desc ' ({ { all childemployeelis人)/span I class=' LC font LC-add ' @点击。stop=' selectDepartmentEmployees()' title='添加整个部门成员/I/span/a ul v-show='部门。展开' childEmployeeList ' : employee=' employee ' : VL=' lvl 1 ' :键=' index '/childDepartmentList ' :部门=' department ' : employeeList=' employeeList ' :部门中的子-员工v-部门='部门

5.结构树之员工组件

模板李v-:点击。stop=' select EmplOyee()' a class=' member-item ' v-bind : class=' lvl | level ' href=' JavaScript :'rel=' external no follow ' div class=' LC-avatar flex-se1 ' name=' true ' size=' 30 ' div class=' LC-avatar-30 ' : title=' employee。员工姓名' span class=' LC-avatar-def ' style='底色： RGB(112，118，142)；'div { { employee。员工姓名} }/div/span div class=' LC-avatar-name ' { employee。员工姓名} }/div/div/div I class=' LC font ' v-bind : class=' { ' LC-check ' :员工。选中' }/I/a/Li/模板6 .和上面员工的选中原理类似，控制部门节点的展开和合并也通过$set方法扩展一个响应式的发展属性。

expandTree(){ var self=this if(self。部门。expand===undefined){ self .$set(self.department，' expand '，true)} else { self。部门。展开=！self.department.expand } }总结

以上是边肖介绍的Vue.js的递归组件，实现组织结构树和选人功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！