element实现选择器,全选功能

首先增加全选按钮:

<el-select filterable v-model="cityIds" multiple  collapse-tags   placeholder="请选择"  @change="getCityNames" >
           <el-option label="----全选----" value="000"></el-option>
          <el-option v-for="item in options.cityList" 
                        :key="item.area_id" 
                        :label="item.area_name"
                        :value="item.area_id">
           </el-option>
</el-select>

通过watch事件进行,全选互斥:

watch: {
            cityIds:function(value){
                let valength = value.length;
                if(valength > 1 && value[valength - 1] == "000"){
                    this.cityIds = ["000"];
                }else if(valength == 2 && value[0] == "000"){
                    this.cityIds.shift();
                }
            }
        },

最后再通过change事件进行数据处理,ok

猜你喜欢

转载自www.cnblogs.com/DIVEY/p/12361875.html