vue部門三級聯動組件

這個是一個部門的三級聯動，有需要的可以參考下

//當前組件名爲arealink
<template>
  <el-row :span="10">
    <el-col :span="8">
      <el-select v-model="area" :placeholder="areaName" :disabled="areaFlag" @change="changeArea">
        <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-col>
    <el-col :span="8">
      <el-select
        v-model="group"
        :placeholder="groupName"
        :disabled="groupFlag"
        @change="changeGroup"
      >
        <el-option v-for="item in groupData" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-col>
    <el-col :span="8">
      <el-select
        v-model="member"
        :placeholder="memberName"
        :disabled="memberFlag"
        @change="changeMember"
      >
        <el-option
          v-for="item in memberData"
          :key="item.userId"
          :label="item.username"
          :value="item.userId"
        ></el-option>
      </el-select>
    </el-col>
  </el-row>
</template>

上面這部分是html部分

<script>
import { mapGetters } from "vuex";
import { getTeachersByDeptId } from "@/api/teachers";
export default {
//因爲我這個項目設計到權限問題，總經理以上纔有所有的權限，大區只有大區以下的權限，
//組長只有組長以下的權限，組員是不能選擇的，因此需要在父組件中傳入三個disabled變量來進行權限判斷
  props: {
    //   部門id
    deptId: {
      type: Number,
      required: true
    },
    // 角色id
    roleId: {
      type: Number,
      required: true
    },
    // 用戶id
    userId: {
      type: Number,
      required: true
    },
    // 大區
    areaName: {
      type: String,
      required: true
    },
    // 組長
    groupName: {
      type: String,
      required: true
    },
    //成員
    memberName: {
      type: String,
      required: true
    },
    //禁用組員id
    disabledMemberId: {
      type: Number,
      required: true
    },
    //禁用組長id
    disabledGroupId: {
      type: Number,
      required: true
    },
    //禁用大區id
    disabledAreaId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      area: "",
      group: "",
      member: "",
      areaData: [],
      groupAllData: [], //所有的組長
      memberAllData: [], //所有的組員
      groupData: [], //過濾後的組長
      memberData: [], //過濾後的組員
      areaFlag: false,
      groupFlag: false,
      memberFlag: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * @description 獲取所有的大區/組長/成員列表數據
     * @description groupAllData 所有的組長 memberAllData 所有的組員
     * @description groupData 過濾後的組長 memberData 過濾後的組員
     * @param {Number} id: 部門id
     */
    async getList() {
    //這個接口可以獲取當前部門所有的成員列表
      const result = await getTeachersByDeptId(this.deptId);
      if (result.data.data.child) {
        //所有大區
        this.areaData = result.data.data.child;
        this.areaData.map(item => {
          //所有組長
          this.groupAllData.push(...item.child);
        });
        this.groupAllData.map(item => {
          //所有成員
          this.memberAllData.push(...item.users);
        });
        this.initData(
          this.areaData,
          this.roleId,
          this.disabledMemberId,
          this.disabledGroupId,
          this.disabledAreaId
        );
      }
    },

    /**
     * @description 初始化獲取部門數據處理
     */
    initData( listData,roleId,disabledMemberId,disabledGroupId, disabledAreaId) {
      //組員
      listData.forEach(area => {
        //禁用大區大區經理只有大區以下的權限，需要禁用大區
        area.users.forEach(item => {
          if (item.userId == this.userId) {
            this.areaFlag = true;
            this.area = area.id;
          }
        });
        area.child.forEach(group => {
        //判斷成員角色，組員，需要禁用所有下拉選項
          if (roleId == disabledMemberId) {
            this.areaFlag = true;
            this.groupFlag = true;
            this.memberFlag = true;
          }
          if (group.id == this.useId) {
            this.area = area.id;
            this.group = group.id;
          }
          group.users.forEach(member => {
          /判斷成員角色，組長，需要禁用大區，組長下拉選項
            if (roleId == disabledGroupId) {
              this.areaFlag = true;
              this.groupFlag = true;
              this.memberFlag = false;
            }
            if (member.userId == this.useId) {
              this.area = area.id;
              this.group = group.id;
              this.member = member.userId;
            }
          });
        });
      });
    },
    /**
     * @description 清空組長及成員
     */
    changeArea() {
      this.group = null;
      this.member = null;
    },
    /**
     * @description 清空成員
     */
    changeGroup() {
      this.member = null;
    },
    changeMember() {}
  },
  watch: {
    area(newVal, oldVal) {
      //大區
      this.groupData = this.groupAllData.filter(item => {
        return item.parentId == newVal;
      });
    },
    group(newVal, oldVal) {
      //組長
      this.memberAllData = this.groupAllData.filter(item => {
        return item.id == newVal;
      });
      this.memberData =
        this.memberAllData.length && this.memberAllData[0].users;
    }
  }
};
</script>

//父組件調用
//userId 當前用戶的userid
//roleId當前用戶的角色id
//disabledMemberId 17 組員
//disabledGroupId 18 組長
//disabledAreaId 19 大區經理
<arealink
    :deptId="1"
     :userId="userId"
     :roleId="getRoleId"
     areaName="銷售大區"
     groupName="銷售組"
     memberName="銷售個人"
     :disabledMemberId="17"
     :disabledGroupId="18"
     :disabledAreaId="19"
   ></arealink>