select 多选

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

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

1. 先把select插件写好
2. 当下拉框的值变化的时候 ，实现数据的监听，来判断是否选择了全部或者没选择全部
3. 然后根据共用部分，封装一个方法，只需要传改变的值和他对应data里面的下标

<template>
  <div class="Condition">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item
        :label="item.label"
        v-for="(item, index) in formlist"
        :key="index"
      >
        <el-select
          v-model="formInline[item.model]"
          placeholder="请选择"
          multiple
          collapse-tags
        >
          <el-option
            v-for="i in item.options"
            :key="i.label"
            :label="i.label"
            :value="i.value"
            :disabled="i.disabled"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        kequn: ["0"],   //默认值 客群选择是全部代发
        DFPLLX: ["0"],　　//默认值 代发频率类型为全部代发
      },
      formlist: [
        {
          label: "客群",
          model: "kequn",
          options: [
            {
              label: "全部代发",
              value: "0",
            },
            {
              label: "存量代发",
              value: "1",
            },
            {
              label: "新增代发",
              value: "2",
            },
          ],
        },
        {
          label: "代发频率类型",
          model: "DFPLLX",
          options: [
            {
              label: "全部代发",
              value: "0",
            },
            {
              label: "固定代发",
              value: "1",
            },
            {
              label: "间歇代发",
              value: "2",
            },
            {
              label: "一次代发",
              value: "3",
            },
          ],
        },
      ],
    };
  },
  methods: {
    changeSelect(newVal, index) {    //newVal 为条件变更后监听的值，index为当前数据在定义数据的下标
      // 如果全选
      if (newVal.includes("0")) {　　//如果变更后的值选择了全部代发
        this.formlist[index]["options"].forEach((item) => {
          //不让其他的选项选择
          if (item.label !== "全部代发") {
            item.disabled = true;
          }
        });
      } else {
        // 如果没有选择全部代发 ，先初始化为都可以选择
        this.formlist[index]["options"].forEach((item) => {
          item.disabled = false;
          // 如果选择并且没有选择全部代发，就把全部代发设置为禁用
          if (newVal.length > 0 && !newVal.includes("0")) {
            if (item.label == "全部代发") {
              item.disabled = true;
            }
          }
        });
      }
    },
  },
  watch: {
    formInline: {
      handler(newVal) {
        const { kequn, DFPLLX } = newVal;
        this.changeSelect(kequn, 0); //客群
        this.changeSelect(DFPLLX, 1); //代发频率类型
      },
      immediate: true,
      deep: true,
    },
  },
};