【Vue.js實戰案例】- 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
           }
         ]
       }
     }
   }

   View Code

   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:;">
         <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
         }
       }

    

         以上就是核心步驟的總體思路，歡迎討論。

 

 完整版實戰課程附demo：Vue.js遞歸組件實現多層級菜單結構樹+仿QQ建羣選人功能

 

 

 

 

 

qq   ['kju:'kju:]   詳細 X

基本翻譯

騰訊即時聊天工具

網絡釋義

平板QQ: QQ for Pad

QQ Dancer: 勁舞團

QQ幻想: QQ Fantasy