在實(shí)際vue項(xiàng)目使用多選框時(shí)管引，倘若用戶需要選擇多個(gè)選項(xiàng)义锥，那他就需要點(diǎn)擊多次餐弱；該代碼實(shí)現(xiàn)點(diǎn)擊一次即選擇全部跃赚，并將全部選項(xiàng)顯示在多選框內(nèi)
直接貼代碼：
<div class="select-form">
<el-form>
<el-form-item>
<el-select placeholder="請(qǐng)選擇活動(dòng)區(qū)域" multiple v-model="citys">
<el-option v-show="!all" label="選擇所有" value="all"></el-option>
<el-option v-show="all" label="取消所有" value="cancleAll"></el-option>
<el-option v-for="item in cities" :label="item.label" :value="item":key="item.value"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-button class="check-btn" type="primary" @click="check">查看</el-button>
</div>
data () {
return {
cities: [
{value: 'Beijing',label: '北京'},
{value: 'Shanghai',label: '上海'},
{value: 'Nanjing',label: '南京'},
{value: 'Chengdu',label: '成都'},
{value: 'Shenzhen',label: '深圳'},
{value: 'Guangzhou',label: '廣州'}
],
citys:[],
all: false,
}
},
methods: {
check(){
console.log(this.citys)
},
},
watch:{
citys(val,oldval){
//如果新的選擇里有勾選了選擇所有, 則勾選整個(gè)選項(xiàng)
if(val.indexOf('all')!=-1 && oldval.indexOf('all')==-1 && val.length this.cities.length){
this.citys=[].concat(this.cities);
this.all = true;
}
//如果操作前有勾選了多項(xiàng)且當(dāng)前也選中了取消所有且勾選數(shù)量大于等于1則取消勾選所有
else if(val.indexOf('cancleAll')!=-1 && oldval.indexOf('cancleAll')==-1 &oldval.length>=1){
this.all = false;
this.citys = [];
}
}
}
.select-form{
display: flex;
justify-content: center;
height: 40px;
}
.check-btn{
margin-left: 20px;
}
取消選擇
選擇全部
查看選擇
