【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
        }
      ]
    }
  }
}

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
      }
    }

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