el-cascader的数据互斥功能2

上次的方法是操作数据源循环遍历家的disabled
这次采用获取dom添加class操作
上代码：

<template>
  <div class="block">
    <el-cascader
      :options="options"
      @change="handleChange"
      :props="{ checkStrictly: true, multiple: true }"
      filterable
      v-model="selectArr"
      clearable
      collapse-tags
      @expand-change="expand"
    ></el-cascader>
  </div>
</template>

<script>
  methods: {
    handleChange(arr) {
      this.noElection(arr);
    },
    // 处理禁用数据
    noElection(data) {
      // 接收的参数为Cascader Events —— expand-change —— 当展开节点发生变化时触发	—— 各父级选项值组成的数组
      setTimeout(() => {
        // 延时器是为了拿到最新值
        // 获取展开的面板
        let menu = document.querySelectorAll(".el-cascader-menu");
        console.log(menu,111111)
        let label, span, input;
        let idList = [];
        // 为对应的节点添加相应的类名及属性
        if (data && data.length > 0) {
          Array.from(data).forEach((item) => {
            idList.push(item[0]._id);
          });
          for (let i = 0; i < menu.length; i++) {
            label = menu[i].querySelectorAll("li label");
            span = menu[i].querySelectorAll("li label .el-checkbox__input");
            input = menu[i].querySelectorAll(
              "li label .el-checkbox__input input"
            );
            if (idList.includes("noLabel")) {
              label.forEach((val, index) => {
                if (i == 0) {
                  if (index !== 1) {
                    val.classList.add("is-disabled");
                  }
                } else {
                  val.classList.add("is-disabled");
                }
              });
              span.forEach((val, index) => {
                if (i == 0) {
                  if (index !== 1) {
                    val.classList.add("is-disabled");
                  }
                } else {
                  val.classList.add("is-disabled");
                }
              });
              input.forEach((val, index) => {
                if (i == 0) {
                  if (index !== 1) {
                    val.setAttribute("disabled", "disabled");
                  }
                } else {
                  val.setAttribute("disabled", "disabled");
                }
              });
            } else if (idList.includes("")) {
              label.forEach((val, index) => {
                if (i == 0) {
                  if (index !== 0) {
                    val.classList.add("is-disabled");
                  }
                } else {
                  val.classList.add("is-disabled");
                }
              });
              span.forEach((val, index) => {
                if (i == 0) {
                  if (index !== 0) {
                    val.classList.add("is-disabled");
                  }
                } else {
                  val.classList.add("is-disabled");
                }
              });
              input.forEach((val, index) => {
                if (i == 0) {
                  if (index !== 0) {
                    val.setAttribute("disabled", "disabled");
                  }
                } else {
                  val.setAttribute("disabled", "disabled");
                }
              });
            } else {
              label.forEach((val, index) => {
                val.classList.remove("is-disabled");
                if (i == 0) {
                  if (index == 1) {
                    val.classList.add("is-disabled");
                  }
                }
              });
              span.forEach((val, index) => {
                val.classList.remove("is-disabled");
                if (i == 0) {
                  if (index == 1) {
                    val.classList.add("is-disabled");
                  }
                }
              });
              input.forEach((val, index) => {
                val.removeAttribute("disabled", "disabled");
                if (i == 0) {
                  if (index == 1) {
                    val.setAttribute("disabled", "disabled");
                  }
                } 
              });
            }
          }
        }
        // 为空时，取消对应的类名及属性
        if (data.length == 0) {
          for (let i = 0; i < menu.length; i++) {
            label = menu[i].querySelectorAll("li label");
            span = menu[i].querySelectorAll("li label .el-checkbox__input");
            input = menu[i].querySelectorAll(
              "li label .el-checkbox__input input"
            );
            label.forEach((val) => {
              val.classList.remove("is-disabled");
            });
            span.forEach((val) => {
              val.classList.remove("is-disabled");
            });
            input.forEach((val) => {
              val.removeAttribute("disabled", "disabled");
            });
          }
        }
      }, 100);
    },
    // 当展开节点发生变化时触发
    expand() {
      this.noElection(this.selectArr);
    },
  },
};
</script>