select 多选

可多选，选择全部时不可选择其他，选择其他不可选择全部

---

 

 选择全部，不可选择其他条件

选择其他条件时，不可选择全部

 

　　 思路　　

1. 初始化为选择全部
2. 当下拉框的值变化的时候 ，实现数据的监听，来判断是否选择了全部或者没选择全部
3. 选择了全部，给其他的条件加禁用，选择了其他条件，给全部加禁用

 

<template>
  <div>
    <el-select v-model="selectData" multiple collapse-tags placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectData: ["0"], //默认选择全部
      options: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
    };
  },
  watch: {
    selectData: {
      handler(newVal) {
        // 如果选择了全部
        if (newVal.includes("0")) {
          //如果变更后的值选择了全部
          this.options.forEach((item) => {
            //不让其他的选项选择
            if (item.label !== "全部") {
              item.disabled = true;
            }
          });
        } else {
          // 如果没有选择全部 ，先初始化为都可以选择
          this.options.forEach((item) => {
            item.disabled = false;
            // 如果选择并且没有选择全部，就把全部设置为禁用
            if (newVal.length > 0 && !newVal.includes("0")) {
              if (item.label == "全部") {
                item.disabled = true;
              }
            }
          });
        }
      },
      deep: true,
      immediate: true, //默认
    },
  },
};
</script>