el-cascader的数据互斥功能

html部分

<template>
  <div class="block">
    <el-cascader
      placeholder="试试搜索：指南"
      :options="options"
      @change="handleChange"
      :props="{ checkStrictly:true,multiple: true }"
      filterable
      v-model="selectArr"
      clearable
      collapse-tags
      :before-filter='beforeFilter'
      @visible-change='visibleChange'
    ></el-cascader>
  </div>
</template>

js部分
注：这边未写beforeFilter和visibleChange方法时会造成搜索出来无法多选问题，所以这连个方法是为了解决这个问题

   handleChange(arr){
      if (arr.length > 0) {
        this.idArr = []
        arr.forEach((item) => {
            // 通话高级搜索带上name值
            item.forEach((i) => {
              this.idArr.push(i._id);
              if(!this.val){
                this.options = this.addDisabled(this.options,this.idArr)
              }else{
                return
              }
            });
        });
      } else {
        this.val = ''
        if(!this.val){
          this.options = this.addDisabled(this.options)
        }else{
          return
        }
      }
    },
    beforeFilter(val){
      if(val){
        this.val = val
      }else{
        this.val = ''
      }
    },
    visibleChange(val){
      if(val){
        this.idArr = []
        if (this.selectArr.length > 0) {
          this.selectArr.forEach((item) => {
              // 通话高级搜索带上name值
              item.forEach((i) => {
                this.idArr.push(i._id);
                this.options = this.addDisabled(this.options,this.idArr)
              });
          });
        } else {
          this.options = this.addDisabled(this.options)
        }
      }else{
        this.val = ''
      }
    },
    // 处理下拉框数据
    选择标签互斥
    addDisabled(dropdownList,item) {
      let list = [];
      try {
        dropdownList.forEach((e) => {
          let e_new = {
            label:e.label,
            value:e.value
          }
          if (item) {
            if (item.includes("")) {
              if (e.value._id !== "") {
                e_new = { ...e_new, disabled: true };
              } else {
                e_new = { ...e_new, disabled: false };
              }
            } else if (item.includes("noLabel")) {
              if (e.value._id !== "noLabel") {
                e_new = { ...e_new, disabled: true };
              } else {
                e_new = { ...e_new, disabled: false };
              }
            } else {
              if (e.value._id == "noLabel") {
                e_new = { ...e_new, disabled: true };
              } else {
                e_new = { ...e_new, disabled: false };
              }
            }
          } else {
            e_new = { ...e_new, disabled: false };
          }
          if (e.children) {
            const children = this.addDisabled(e.children, item);
            e_new = { ...e_new, children: children };
          }
          list.push(e_new);
        });
      } catch (error) {
        console.log(error);
        return [];
      }
      // console.log(list,'list')
      return list;
    },

此方法可以完成需求但是数据量大的时候这种方法不太实用，因为需要多次才做数据源渲染数据源，暂未想到别的好的办法，大家有啥好的办法可以推我。