华山资源网

Vue.js递归组件实现组织架构树和选人功能案例分析
网络编程 2024/11/18 佚名
3 1

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

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

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com