美文网首页
Element-ui多选下拉实现全部与其他互斥

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

作者: 双耳云 | 来源:发表于2019-07-06 10:02 被阅读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();
        }
    },
    

    相关文章

      网友评论

          本文标题:Element-ui多选下拉实现全部与其他互斥

          本文链接:https://www.haomeiwen.com/subject/muouhctx.html