el-checkbox实现全选

以下是el-checkbox实现全选、反选、多选的代码示例：

1. 全选

<template>
  <div>
    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">{{ checkAll ? '取消全选' : '全选' }}</el-checkbox>
    <br>
    <br>
    <el-checkbox-group v-model="checkedCities">
      <el-checkbox v-for="city in cityOptions" :label="city" :key="city">{{ city }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityOptions: ['北京', '上海', '广州', '深圳'],      checkedCities: [],
      checkAll: false,
      isIndeterminate: false,
      checkInvert: false
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : [];
      this.isIndeterminate = false;
      this.checkInvert = false;
    }
  }
};
</script>

2. 反选

<template>
  <div>
    <el-checkbox v-model="checkInvert" @change="handleCheckInvertChange">反选</el-checkbox>
    <br>
    <br>
    <el-checkbox-group v-model="checkedCities">
      <el-checkbox v-for="city in cityOptions" :label="city" :key="city">{{ city }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityOptions: ['北京', '上海', '广州', '深圳'],
      checkedCities: [],
      checkAll: false,
      isIndeterminate: false,
      checkInvert: false
    };
  },
  methods: {
    handleCheckInvertChange() {
      this.checkedCities = this.cityOptions.filter(city => !this.checkedCities.includes(city));
      this.checkAll = this.checkedCities.length === this.cityOptions.length;
      this.isIndeterminate = this.checkedCities.length > 0 && this.checkedCities.length < this.cityOptions.length;
    }
  }
};
</script>

3. 多选

<template>
  <div>
    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">{{ checkAll ? '取消全选' : '全选' }}</el-checkbox>
    <el-checkbox v-model="checkInvert" @change="handleCheckInvertChange">反选</el-checkbox>
    <br>
    <br>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cityOptions" :label="city" :key="city">{{ city }}</el-checkbox>
    </el-checkbox-group>
    <br>
    <br>
    <div>已选中 {{ checkedCities.length }} 项</div>
    <div v-if="isIndeterminate">已选中 {{ checkedCities.length }} 项，共 {{ cityOptions.length }} 项</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityOptions: ['北京', '上海', '广州', '深圳'],
      checkedCities: [],
      checkAll: false,
      isIndeterminate: false,
      checkInvert: false
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : [];
      this.isIndeterminate = false;
      this.checkInvert = false;
    },
    handleCheckInvertChange() {
      this.checkedCities = this.cityOptions.filter(city => !this.checkedCities.includes(city));
      this.checkAll = this.checkedCities.length === this.cityOptions.length;
      this.isIndeterminate = this.checkedCities.length > 0 && this.checkedCities.length < this.cityOptions.length;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cityOptions.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cityOptions.length;
      this.checkInvert = false;
    }
  }
};
</script>