el-checkbox实现全选反选

以下是el-checkbox实现全选、反选、多选的代码示例： 1. 全选 ```html <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. 反选 ```html <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. 多选 ```html <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> ```