el-checkbox-group的全选与反选

需求如下：

思路：在点击全部时按钮组双向绑定赋值全部值，点击按钮组内按钮计算选中按钮数量与按钮组数量对比，判定是否选中全部

代码如下：

<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>