<div class="LeftText">
                <span style="color: red; margin-right: 4px">*</span>部門：
              </div>
              <el-select
                v-model="executiveDepartName"
                filterable
                :filter-method="selectChange"
                multiple
                @visible-change="visibleChange"
                @remove-tag="seleRemoveTag"
                style="width: 80%"
              >
                <el-option style="display: none" value=""></el-option>
                <el-checkbox
                  style="
                    width: 100%;
                    height: 40px;
                    line-height: 40px;
                    padding-left: 20px;
                    border-bottom: 1px solid #dcdfe6;
                  "
                  class="allselect"
                  :indeterminate="isIndeterminate"
                  v-model="allSelectModule"
                  @change="allselect"
                  >全選</el-checkbox
                >
                <el-cascader-panel
                  ref="cascaderModule"
                  :key="deptList.length"
                  :options="deptList"
                  @change="cascaderChange"
                  style="width: 80%"
                  :props="props"
                  filterable
                  :border="false"
                  :show-all-levels="false"
                  v-model="executiveDepartment"
                >
                </el-cascader-panel>
              </el-select>
            </div>

     props: {
        multiple: true,
        value: "deptId",
        label: "deptName",
        checkStrictly: true,
        emitPath: false,
      },   
    allDeptList:[];//所有的部門信息，內(nèi)部結(jié)構(gòu)為：{deptId:1,deptName:"一級部門"}
    isSeach:false;//是否搜索狀態(tài)
    tempExecutive:[];// 搜索前已選中的數(shù)據(jù)
    //搜索查詢事件--是因?yàn)樵赾ascaderChange事件中，對v-model的值重新賦值，導(dǎo)致下拉選時(shí)，會觸發(fā)el-select的搜索事件，所以加了一個(gè)isFilter判斷
    selectChange(val) {
      if (val !== "") {
        this.deptList = [];
        this.deptList = this.allDeptList.filter((item) => {
          return item.deptName.toLowerCase().indexOf(val.toLowerCase()) > -1;
        });
        this.isSeach = true;
        this.tempExecutive = this.executiveDepartment;
      } else {
        if (!this.isFilter) {
          this.deptList = this.handleTree(this.allDeptList, "deptId");
          this.isFilter = !this.isFilter;
        }
      }
    },
    visibleChange(e) {
      if (e) {
        this.isSeach = false;
        this.isFilter = false;
        this.deptList = this.handleTree(this.allDeptList, "deptId");
        this.initStatus();
      }
    },
    對全選狀態(tài)進(jìn)行重新賦值
    initStatus() {
      if (this.executiveDepartment.length == this.allDeptList.length) {
        this.allSelectModule = true;
        this.isIndeterminate = false;
      } else if (this.executiveDepartment.length == 0) {
        this.allSelectModule = false;
        this.isIndeterminate = false;
      } else {
        this.allSelectModule = false;
        this.isIndeterminate = true;
      }
    },
    //select框里回顯的是選中部門的名稱
    getDeptName() {
      const result = [];
      this.executiveDepartment.filter((item) => {
        this.allDeptList.map((i) => {
          if (item == i.deptId) {
            result.push(i.deptName);
          }
        });
      });
      return result;
    },
    seleRemoveTag(val) {
      if (val) {
        const result = this.allDeptList.find((item) => {
          if (item.deptName == val) {
            return item;
          }
        });
        this.executiveDepartment = this.executiveDepartment.filter(
          (item) => item !== result.deptId
        );
      }
    },
    // 下拉多選選中時(shí)觸發(fā)的事件
    cascaderChange() {
      this.isFilter = true;
      //如果是搜索狀態(tài)，講之前選中的值和搜素狀態(tài)下的值進(jìn)行合并和去重，否則，之前選中的值會被清空
      if (this.isSeach) {
        this.executiveDepartment = [
          ...new Set([...this.tempExecutive, ...this.executiveDepartment]),
        ];
      }
      this.executiveDepartName = this.getDeptName();
      this.initStatus();
    },
    //全選事件
    allselect() {
      if (this.allSelectModule) {
        this.isIndeterminate = false;
        if (this.isSeach) {
          this.executiveDepartment = this.deptList.map((item) => item.deptId);
          this.executiveDepartName = this.getDeptName();
        } else {
          this.executiveDepartment = this.getAllIds(this.deptList);
          this.executiveDepartName = this.getDeptName();
        }
      } else {
        this.executiveDepartment = [];
        this.executiveDepartName = [];
      }
    },
    getAllIds(nodes) {
      let ids = [];
      (function getIds(nodes) {
        nodes.forEach((node) => {
          ids.push(node.deptId);
          if (node.children && node.children.length) {
            getIds(node.children);
          }
        });
      })(nodes);
      return ids;
    },