elementui中的el-checkbox-group添加全选按钮

在Element UI中，可以通过在el-checkbox-group中添加一个额外的el-checkbox作为全选按钮，并监听其change事件来控制组内其他复选框的选中状态。以下是一个简单的示例代码：

<template>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckAllChange">
    <el-checkbox label="全选" :indeterminate="isIndeterminate" @change="handleCheckAllChange"></el-checkbox>
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
  </el-checkbox-group>
</template>
 
<script>
export default {
  data() {
    return {
      checkedCities: [],
      cities: ['上海', '北京', '广州', '深圳'],
      isIndeterminate: false,
    };
  },
  methods: {
    handleCheckAllChange(value) {
      if (value) {
        this.checkedCities = this.cities.slice();
        this.isIndeterminate = false;
      } else {
        this.checkedCities = [];
        this.isIndeterminate = false;
      }
    },
  },
};
</script>

在这个例子中，checkedCities是绑定到el-checkbox-group的模型，它是一个数组，包含了所有选中的复选框的值。handleCheckAllChange方法会在全选复选框的状态改变时被调用，根据其状态来设置checkedCities的值。isIndeterminate用于表示全选按钮的状态，当部分复选框被选中时，全选按钮会显示为未确定状态（勾选框中有一个小圈）。