vue element-ui多选框按钮全选（笔记）

<el-col :span="12">
                    <el-switch
                      v-model="checkAll"
                      @change="handleCheckAll"
                    >
                    </el-switch>
                  </el-col>
                  <el-col :span="24">
                    <el-checkbox-group
                      @change="handleChecked"
                      v-model="checked"
                    >
                      <el-checkbox-button
                        v-for="(item, index) in hylbOptions"
                        :key="index"
                        :label="item.name"
                      >
                        {
         
  { item.name }}
                      </el-checkbox-button>
                    </el-checkbox-group>
                  </el-col>

data() {
          
   
    return {
          
   
      checkAll: false,
      checked: [],
      name: [],
      }
    }

methods: {
          
   
    handleCheckAll(val) {
          
   
      this.name = [];
      for (let i = 0; i < this.hylbOptions.length; i++) {
          
   
        this.name[i] = this.hylbOptions[i].name;
      }
      this.checked = val ? this.name : [];
    },
    handleChecked(value) {
          
   
      this.checked = value;
      let checkedCount = value.length;
      this.checkAll =checkedCount != 0 && checkedCount == this.name.length;
    },
  }