首页 > 其他 > 详细

el-select多选时选项互斥

时间:2021-01-27 14:18:17      阅读:133      评论:0      收藏:0      [点我收藏+]

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

 

   <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且当前的选项为“无”则禁用

el-select多选时选项互斥

原文:https://www.cnblogs.com/alecc1124/p/14333645.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!