本篇文章給大家分享的是有關Vue.js遞歸組件實現(xiàn)組織架構樹和選人功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

萬榮ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

實現(xiàn)步驟如下：

1. api構建部門和員工信息接口，vuex全局存放部門list和員工list數(shù)據(jù)信息。

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: '周潤發(fā)',
     departmentId: 47
    },
    {
     id: 14,
     employeeName: '周慧敏',
     departmentId: 58
    },
    {
     id: 13,
     employeeName: '張學友',
     departmentId: 58
    }
   ]
  }
 },
 getDepartmentList () {
  return {
   returncode: 0,
   message: '',
   result: [
    {
     id: 40,
     name: '研發(fā)一部',
     parentId: 37,
     sequence: 2
    },
    {
     id: 41,
     name: '研發(fā)二部',
     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: '研發(fā)三部',
     parentId: 37,
     sequence: 1
    },
    {
     id: 47,
     name: '研發(fā)四部',
     parentId: 37,
     sequence: 3
    },
    {
     id: 37,
     name: '研發(fā)',
     parentId: 0,
     sequence: 5
    },
    {
     id: 58,
     name: '研發(fā)一部',
     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: '研發(fā)二部',
     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中創(chuàng)建選中方法如下：

selectEmployee () {
   var self = this
   if (self.employee.checked === undefined) {
    this.$set(self.employee, 'checked', true)
   } else {
    self.employee.checked = !self.employee.checked
   }
  }

3. computed計算屬性監(jiān)控文本框輸入字段searchKey的變化實現(xiàn)左側(cè)員工列表實時檢索功能。

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. 構建組織結構樹的部門組件，部門下可能存在子部門和員工，所以組件內(nèi)部再調(diào)用部門組件和員工組件，以達到循環(huán)遞歸的效果。

5. 結構樹之員工組件

6. 和上面員工的選中原理類似，控制部門節(jié)點的展開和合并也通過$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遞歸組件實現(xiàn)組織架構樹和選人功能，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：Vue.js遞歸組件實現(xiàn)組織架構樹和選人功能-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/cchjse.html