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

2019-07-06  本文已影响0人  双耳云

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();
    }
},
上一篇 下一篇

猜你喜欢

热点阅读