el-checkbox-group全选

对于`el-checkbox-group`组件来说，要实现全选功能，可以通过控制`el-checkbox`的选中状态，以及绑定相应的事件来实现。

首先，你需要在`data`中定义一个变量来保存全选的状态，例如命名为`isCheckedAll`，默认为`false`。

然后，在`el-checkbox-group`中，可以使用`v-model`指令来绑定一个数组，用于保存选中的项。同时，你可以在该组件中添加一个额外的`el-checkbox`用于表示全选。

接下来，你可以为全选的`el-checkbox`绑定一个点击事件，当点击时将`isCheckedAll`设置为相反的值。在这个点击事件中，你还需要根据`isCheckedAll`的值来决定是否将所有的选项都选中或取消选中。

以下是一个示例代码：

<template>
  <div>
    <el-checkbox v-model="isCheckedAll" @change="handleCheckAll">全选</el-checkbox>
    <el-checkbox-group v-model="selectedOptions" @change="handleChange">
      <el-checkbox v-for="option in options" :label="option.label" :key="option.value">{{ option.label }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCheckedAll: false,
      selectedOptions: [],
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
      ],
    };
  },
  methods: {
    handleCheckAll() {
      if (this.isCheckedAll) {
        // 全选
        this.selectedOptions = this.options.map(option => option.value);
      } else {
        // 取消全选
        this.selectedOptions = [];
      }
    },
    handleChange() {
      if (this.selectedOptions.length === this.options.length) {
        // 当选中的项数量与总项数相同时，表示全选
        this.isCheckedAll = true;
      } else {
        this.isCheckedAll = false;
      }
    },
  },
};
</script>

在上述代码中，`options`数组中存储了需要展示的选项，每个选项包含`label`和`value`属性。`selectedOptions`用于保存选中的项。

当点击全选的`el-checkbox`时，触发`handleCheckAll`方法，根据`isCheckedAll`的值来决定是否全选或取消全选。当选择项发生变化时，触发`handleChange`方法，根据选中项的数量来更新`isCheckedAll`的值。