Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹(shù)和選人功能
大家好!先上圖看看本次案例的整體效果。
浪奔,浪流,萬(wàn)里濤濤江水永不休。如果在jq時(shí)代來(lái)實(shí)這個(gè)功能簡(jiǎn)直有些噩夢(mèng)了,但是自從前端思想發(fā)展到現(xiàn)在的以MVVM為主流的大背景下,來(lái)實(shí)現(xiàn)一個(gè)這樣繁雜的功能簡(jiǎn)直不能容易太多。下面就手把手帶您一步步撥開(kāi)這個(gè)案例的層層迷霧。
實(shí)現(xiàn)步驟如下:
1. api構(gòu)建部門(mén)和員工信息接口,vuex全局存放部門(mén)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: '張國(guó)榮', departmentId: 45 }, { id: 6, employeeName: '陳百?gòu)?qiáng)', departmentId: 45 }, { id: 7, employeeName: '譚詠麟', departmentId: 41 }, { id: 8, employeeName: '谷村新司', departmentId: 45 }, { id: 9, employeeName: '中島美雪', departmentId: 46 }, { id: 10, employeeName: '周潤(rùn)發(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: '市場(chǎng)', parentId: 0, sequence: 6 }, { id: 44, name: '銷售', parentId: 0, sequence: 4 }, { id: 45, name: '財(cái)務(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: '測(cè)試', parentId: 0, sequence: 5 }, { id: 60, name: '測(cè)試一部', parentId: 59, sequence: 1 }, { id: 61, name: '測(cè)試二部', 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為員工對(duì)象增加響應(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計(jì)算屬性監(jiān)控文本框輸入字段searchKey的變化實(shí)現(xiàn)左側(cè)員工列表實(shí)時(shí)檢索功能。
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)樹(shù)的部門(mén)組件,部門(mén)下可能存在子部門(mén)和員工,所以組件內(nèi)部再調(diào)用部門(mén)組件和員工組件,以達(dá)到循環(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="添加整個(gè)部門(mén)成員"></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)樹(shù)之員工組件
<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. 和上面員工的選中原理類似,控制部門(mén)節(jié)點(diǎn)的展開(kāi)和合并也通過(guò)$set方法擴(kuò)展一個(gè)響應(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 } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Ant Design Vue Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁(yè)白屏問(wèn)題
這篇文章主要介紹了Ant Design Vue Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁(yè)白屏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10淺談vue-router2路由參數(shù)注意的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談vue-router2路由參數(shù)注意的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11vue使用elementui的el-menu的折疊菜單collapse示例詳解
這篇文章主要介紹了vue使用elementui的el-menu的折疊菜單collapse示例詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12rem實(shí)現(xiàn)響應(yīng)式布局的思路詳解
這篇文章主要為大家介紹了rem實(shí)現(xiàn)響應(yīng)式布局的思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03在vue中實(shí)現(xiàn)表單驗(yàn)證碼與滑動(dòng)驗(yàn)證功能的代碼詳解
在Web應(yīng)用程序中,表單驗(yàn)證碼和滑動(dòng)驗(yàn)證是常見(jiàn)的安全機(jī)制,用于防止惡意攻擊和機(jī)器人攻擊,本文將介紹如何使用Vue和vue-verify-code庫(kù)來(lái)實(shí)現(xiàn)表單驗(yàn)證碼和滑動(dòng)驗(yàn)證功能,需要的朋友可以參考下2023-06-06Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說(shuō)明
這篇文章主要介紹了Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue移動(dòng)端右滑屏幕返回上一頁(yè)附源碼下載
這篇文章主要介紹了Vue移動(dòng)端右滑屏幕返回上一頁(yè),本文結(jié)合實(shí)例給大家介紹的非常詳細(xì),并附有源碼下載,需要的朋友可以參考下2019-06-06