每次使用官方的示例都会被坑一下（可能是我的理解不够透彻吧，不记录一下保不准下次依旧会忘）， 故此今天做个Demo 记录一下。本次仍然使用官网给出的示例，只做理解性的说明。
1、此处先给出官方示例代码：
<template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox> <div style="margin: 15px 0;"></div> <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> </template> <script> const cityOptions = [‘Shanghai‘, ‘Beijing‘, ‘Guangzhou‘, ‘Shenzhen‘]; export default { data() { return { checkAll: false, checkedCities: [‘Shanghai‘, ‘Beijing‘], cities: cityOptions, isIndeterminate: true }; }, methods: { handleCheckAllChange(val) { this.checkedCities = val ? cityOptions : []; this.isIndeterminate = false; }, handleCheckedCitiesChange(value) { let checkedCount = value.length; this.checkAll = checkedCount === this.cities.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; } } }; </script>
2、看代码其他部分都容易理解，这里只对两个方法和属性进行讲解（被选中的数组时根据操作来改变值，不是通过change 触发的函数）
indeterminate：用来标识一个复选框半选的状态，为标签自带属性，为true 时，半选中；为 false 时不选中；
checkAll：用来标识全选框（就是一个普通的复选框）是否被选中，为true 时 全选中；为 false 时不选中；
逻辑：
逐个选择时：
（1） 如果存在一个复选框被选中（示例中从长度为4个复选框），则全选框状态应该是半选的，即，indeterminate 属性值应该为 true，同时 checkAll 的值 为false，代码 this.isIndeterminate = true;
（2） 如果全部选中，则全选框状态应该是选中的，即，indeterminate 属性值应该为 false，同时 checkAll 的值 为true；
使用全选功能时：（此时无论是全选或反选，indeterminate 的值都是false）
（1） 全选时，方法的参数为true, 此时选中数据的数组应该 赋值 为所有数据的数组；
（3）反选时，方法的参数为false，此时选中数据的数组 赋值为空数组；
3、根据上述分析，贴出修改后的代码，此处只对 <el-checkbox-group > 组件的 change事件的触发函数进行修改
函数修改：
handleCheckedCitiesChange() {
//至少有一个被选中时 if(this.checkedCities.length>0){
//所有都被选中了，此时半选的属性为false if (this.checkedCities.length == this.cities.length) { this.checkAll = true; this.isIndeterminate = false; }
//部分被选中，此时半选属性为true
else { this.checkAll = false; this.isIndeterminate = true; } }
//都未被选中时
else{ this.checkAll = false; this.isIndeterminate = false; } }
原文：https://www.cnblogs.com/spqin/p/12884107.html