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且當前的選項為“無”則禁用