el-select多选时选项互斥

应用情况：当多选框中出现  选择无则不能选择其他几项，选择了某一项或者多项别的就不能选择无

 

   <el-select
                v-model="baseInfo.chengYing"
                size="small"
                filterable
                placeholder="请选择具体成瘾类别"
                clearable
                multiple
              >
                <el-option
                  v-for="item in cylbList"
                  :key="item.data_code"
                  :label="item.data_name"
                  :value="item.data_code"
                  :disabled="
                    (baseInfo.chengYing.indexOf('01') > -1 &&
                      item.data_code != '01') ||
                    (baseInfo.chengYing.indexOf('01') <= -1 &&
                      baseInfo.chengYing.length > 0 &&
                      item.data_code === '01')
                  "
                ></el-option>
              </el-select>

重要代码为el-option中的disabled逻辑判断
分为两步

 

1.判断“无”以外的是否禁用

当已选择的东西存在无且当前选项不是“无”就禁用

 

 

2.判断“无”是否禁用

当已选的东西不存在“无”且当前选择的数据长度大于0且当前的选项为“无”则禁用