需求如下:
![]()
思路:在点击全部时按钮组双向绑定赋值全部值,点击按钮组内按钮计算选中按钮数量与按钮组数量对比,判定是否选中全部
代码如下:
- <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>
-
- <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>