el-select 下拉多选 选项互斥

需求

例如：一个下拉多选框，只能选择 “全部” 选项 或 除 “全部” 以外的选项；

---

方案一：

选择“全部”选项时，其他选项禁用；
选择除“全部”以外的选项时，禁用“全部”选项；

<el-form-item label="test" prop="">
  <el-select 
    v-model='values' 
    placeholder='请选择' 
    size='small' 
    multiple collapse-tags 
    @change="valuesChange">
    <el-option
      v-for='item in options'
      :disabled="item.disabled"
      :key='item.dimCde'
      :label='item.dimNme'
      :value='item.dimCde'>
    </el-option>
  </el-select>
</el-form-item>

    valuesChange(data){
      if(data && data.length){
        if(data.includes('all')){
          this.options.forEach(item=>{
            if(item.dimCde === 'all'){
              item.disabled = false;
            }else{
              item.disabled = true;
            }
          })
        }else{
          this.options.forEach(item=>{
            if(item.dimCde === 'all'){
              item.disabled = true;
            }else{
              item.disabled = false;
            }
          })
        }
      }else{
        this.options.forEach(item=>{
          item.disabled = false;
        })
      }
    },

方案二：

选择“全部”选项时，清除其他选项；
选择除“全部”以外的选项时，清除“全部”选项；

<el-form-item label="test" prop="">
  <el-select 
    v-model='values'
    placeholder='请选择'
    size='small'
    multiple collapse-tags>
    <el-option
      v-for='item in options'
      :key='item.dimCde'
      :label='item.dimNme'
      :value='item.dimCde'
      @click.native="itemClick(item)">
    </el-option>
  </el-select>
</el-form-item>

    itemClick(data){
      // 判断操作类型（勾选/取消勾选）
      const _index = this.values.findIndex(item=>{
        return item === data.dimCde
      })
      if(_index !== -1){  // 勾选
        if(data.dimCde === "all"){
          // 如果勾选的是‘全部’选项
          this.values = ['all']
        }else{
          // 如果勾选的不是全部选项
          const _index2 = this.values.findIndex(item=>{
            return item === "all"
          })
          if(_index2 !== -1){
            this.values.splice(_index2, 1);
          }
        }
      }
    },