elementui里checkbox全选操作

<template>
<span>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <el-checkbox-group v-model="checkGroup" @change="handleCheckedChange">
    <el-checkbox v-for="item in copyLists" :label="item.key" :key="item.key">{{item.name}}</el-checkbox>
  </el-checkbox-group>
</span>
</template>
<script>
export default {
  data() {
    return {
      checkAll: false, // 全选
      checkGroup: [], // 已经选中的数据
      isIndeterminate: false, // 全选的标记
      checkedKeyLists: [], // key的list数据
      copyLists: [
        {
          name: '测试1',
          key: '1'
        },{
          name: '测试2',
          key: '2'
        },{
          name: '测试3',
          key: '3'
        },{
          name: '测试4',
          key: '4'
        },{
          name: '测试5',
          key: '5'
        }
      ], // 选择的列表数据
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化 checkedKeyLists
    init() {
      this.copyLists.forEach(el => {
        this.checkedKeyLists.push(el.key);
      });
    },
    // 全选操作
    handleCheckAllChange(val) {
      this.checkGroup = val ? this.checkedKeyLists : [];
      this.isIndeterminate = false;
    },
    // 选择操作
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.copyLists.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.copyLists.length;
    }
  }
};
</script>