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

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

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

1. api構(gòu)建部門和員工信息接口，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: '張學(xué)友',
     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: '財務(wù)',
     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為員工對象增加響應(yīng)式屬性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. 構(gòu)建組織結(jié)構(gòu)樹的部門組件，部門下可能存在子部門和員工，所以組件內(nèi)部再調(diào)用部門組件和員工組件，以達到循環(huán)遞歸的效果。

<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. 結(jié)構(gòu)樹之員工組件

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

網(wǎng)站標(biāo)題：Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能-創(chuàng)新互聯(lián)
當(dāng)前URL：http://www.rwnh.cn/article34/cchjse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、微信公眾號、服務(wù)器托管、網(wǎng)站維護、網(wǎng)站設(shè)計、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)