Element-ui多选下拉实现全部与其他互斥

1、给下拉绑定选项改变的change事件:

<el-form-item prop="pushMessage.userType" label="人群" style="width: 100%">
              <el-select v-model="userType" placeholder="请选择" multiple  @change="changeSelect">
                <el-option
                  v-for="item in userType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

2.实现过程:

2.1当已选项个数大于1(即先选了其他,再选全部)且最后选的是全部时,取消其他选项选中状态;
2.2当已选项个数等于2(即先选了全部,再选其他)且第一个选的是全部时,取消全部的选中状态。

changeSelect(val){
    let le = val.length;
    if(le>1 && val[le-1] === "全部"){
      this.userType = ["全部"]
    }else if(le === 2 && val[0] === "全部" ){
      this.userType.shift();
    }
},
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容