需求如下:
思路:在点击全部时按钮组双向绑定赋值全部值,点击按钮组内按钮计算选中按钮数量与按钮组数量对比,判定是否选中全部
代码如下:
<template>
<div>
<el-checkbox-button v-model="checkall" @change="handleCheckAllChange">全部</el-checkbox-button>
<el-checkbox-group v-model="state" @change="checkRadio" >
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
data () {
return {
cities: cityOptions,
checkall:false,
state:[]
};
},
methods:{
handleCheckAllChange(val){
this.state=val?this.cities:[]
this.getList()
},
checkRadio(val){
this.state=val
const checkedCount=val.length
this.checkAll=checkedCount===this.cities.length
this.getList()
},
getList(){
}
}
}
</script>