Vue + element 实现 el-checkbox-group 分组全选反选。

1. 效果图

说明：点击弹窗按钮显示功能区。

2. 实现代码

<template>
  <div>
    <el-popover placement="bottom" title="标题" trigger="click">
      <!-- 全选 -->
      <el-checkbox
        :indeterminate="indeterminate"
        v-model="CheckAll"
        @change="handleCheckAllChange"
      >全选</el-checkbox>

      <div style="margin:10px 0;"></div>

      <!-- 城市类别多选 -->
      <el-checkbox
        :indeterminate="cityIndeterminate"
        v-model="cityCheckAll"
        @change="handlecityCheckAllChange"
      >城市</el-checkbox>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
      </el-checkbox-group>

      <div style="margin:10px 0;"></div>

      <!-- 水果类别多选 -->
      <el-checkbox
        :indeterminate="fruitIndeterminate"
        v-model="fruitCheckAll"
        @change="handlefruitCheckAllChange"
      >水果</el-checkbox>
      <el-checkbox-group v-model="checkedFruits" @change="handleCheckedFruitsChange">
        <el-checkbox v-for="fruit in fruits" :label="fruit" :key="fruit">{{fruit}}</el-checkbox>
      </el-checkbox-group>

      <!-- 输出数据的按钮 -->
      <div @click="exportData">输出</div>

      <!-- 触发气泡的按钮 -->
      <el-button slot="reference">弹窗按钮</el-button>
    </el-popover>
  </div>
</template>

<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
const fruitOptions = ['苹果', '香蕉', '葡萄', '榴莲'];
const allOptions = [...cityOptions, ...fruitOptions]

export default {
  data() {
    return {
      cityCheckAll: false,
      checkedCities: [],
      cities: cityOptions,
      cityIndeterminate: false,
      checkCityLength: 0,
      fruitIndeterminate: false,
      fruitCheckAll: false,
      checkedFruits: [],
      fruits: fruitOptions,
      checkFruitLength: 0,
      CheckAll: false,
      indeterminate: false,
      checkedAll: [],
      checkAllLength: 0
    }
  },
  // 作用：设置全选按钮的样式及选中情况
  // 触发：当城市、水果的选中情况发生改变时
  watch: {
    checkCityLength(newValue) {
      this.checkAllLength = newValue + this.checkFruitLength
      this.indeterminate = this.checkAllLength > 0 && this.checkAllLength < allOptions.length;
      this.CheckAll = this.checkAllLength === allOptions.length
    },
    checkFruitLength(newValue) {
      this.checkAllLength = newValue + this.checkCityLength
      this.indeterminate = this.checkAllLength > 0 && this.checkAllLength < allOptions.length;
      this.CheckAll = this.checkAllLength === allOptions.length
    }
  },
  methods: {
    // 作用：城市全选按钮改变
    handlecityCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : []; // 设置对应的所有小选是否选中
      this.cityIndeterminate = false; // 设置城市全选按钮样式
      this.groupControlAll() // 设置全选按钮
    },
    // 作用：城市小选按钮改变
    handleCheckedCitiesChange(value) {
      this.checkCityLength = value.length;
      this.cityCheckAll = this.checkCityLength === this.cities.length; // 城市小选控制城市全选
      this.cityIndeterminate = this.checkCityLength > 0 && this.checkCityLength < this.cities.length; // 设置城市全选按钮样式
    },
    // 作用：水果全选按钮改变
    handlefruitCheckAllChange(val) {
      this.checkedFruits = val ? fruitOptions : [];
      this.fruitIndeterminate = false;
      this.groupControlAll()
    },
    // 作用：水果小选按钮改变
    handleCheckedFruitsChange(value) {
      this.checkFruitLength = value.length;
      this.fruitCheckAll = this.checkFruitLength === this.fruits.length;
      this.fruitIndeterminate = this.checkFruitLength > 0 && this.checkFruitLength < this.fruits.length;
    },
    // 作用：全选按钮改变
    handleCheckAllChange(val) {
      this.checkedFruits = val ? fruitOptions : []
      this.checkedCities = val ? cityOptions : [];
      this.cityCheckAll = val
      this.fruitCheckAll = val
      this.indeterminate = false
    },
    // 作用：设置全选按钮的样式、选中情况
    groupControlAll() {
      let num = this.checkedCities.length + this.checkedFruits.length
      // 1. 当有项选中且没有全选
      if (num !== allOptions.length && num !== 0) {
        this.indeterminate = true
        this.CheckAll = false
        // 2. 当所有项都选中
      } else if (num === allOptions.length) {
        this.indeterminate = false
        this.CheckAll = true
        // 3. 当所有项都不选中
      } else if (num === 0) {
        this.indeterminate = false
        this.CheckAll = false
      }
    },
    exportData() {
      let data = [...this.checkedFruits, ...this.checkedCities]
      return data
    }
  }
}
</script>