全选操作分析

一. 官网实例

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
  全选
  </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>
  export default {
    data(){
      return {
        checkAll: false, // 全选
        cities: [
          {
            "name":"高一",
            "value":"928"
          },
          {
            "name":"高二",
            "value":"929"
          },
          {
            "name":"高三",
            "value":"930"
          }
        ], // 数据源
        checkedCities:[], // 绑定默认选中
        isIndeterminate:false, // 设置 indeterminate 状态，只负责样式控制
      }
  
      methods:{
        // 全选 --- 当绑定值变化时触发的事件
        handleCheckAllChange(val) {
          console.log(val) // val的值是一个布尔值，点中全选为false，取消全选为true
          this.cities.forEach(item=>{ // 当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
            this.checkedCities.push(item.name)
          })  
          this.checkedCities = val ? this.checkedCities : []; // 三元表达式，如果val的值为true，那么就把当前默认选中的值赋值给自身，这样页面页面上所有的元素就都选中了。如果为false，就是取消全选
          this.isIndeterminate = false;  // 官网说这是个样式控制，是来控制，什么时候半选的，要不要都无所谓，看你需求
        },
          
        // checkbox选中 --- 当绑定值变化时触发的事件
        handleCheckedCitiesChange(value) {
          let checkedCount = value.length;   //选中值的长度
          this.checkAll = checkedCount === this.cities.length;  // 如果选中值的长度和源数据的长度一样，返回true，就表示你已经选中了全部checkbox，那么就把true赋值给this.checkAll
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; // 同全选按钮事件里面的那个样式控制
        }
     }
   }
  };
</script>

提示

有两个属性来控制全选这个checkbox：indeterminate和checkAll。
indeterminate 为 false，checkAll 为 false 的时候，状态为 未选中。
indeterminate 为 true， checkAll 为 false 的时候，状态为 半选中。
indeterminate 为 false，checkAll 为 true 的时候，状态为 全选中。
把全选框状态改为未选中状态，应该修改indeterminate和checkAll，均为false。

二. 回炉重造

感觉api里面写的太麻烦了，不易懂，自己写了一个，如下：

<el-checkbox v-model="checkAll" @change="handleCheckAllChange">
  全选
</el-checkbox>

<el-checkbox v-for="(city,i) in cities" :label="city.name" :key="i" v-model="checkedCities" @change="handleCheckedCitiesChange">
  {{city.name}}
</el-checkbox>

<script>
  export default {
    data(){
      return {
        checkAll: false, // 全选
        cities: [
          {
            "name":"高一",
            "value":"928"
          },
          {
            "name":"高二",
            "value":"929"
          },
          {
            "name":"高三",
            "value":"930"
          }
        ], // 数据源
        checkedCities:[], // 绑定默认选中
        isIndeterminate:false, // 设置 indeterminate 状态，只负责样式控制
      },
      
      methods:{
        // 全选 --- 当绑定值变化时触发的事件
        handleCheckAllChange(val) {
          if(this.checkAll){
            this.cities.forEach(item=>{ // 当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
              this.checkedCities.push(item.name)
            })
          }else {
            this.checkedCities = []
          }
    
        },  
    
        // checkbox选中 --- 当绑定值变化时触发的事件
        handleCheckedCitiesChange(value) {
          console.log(this.checkedCities);
          if(this.checkedCities.length == this.cities.length){ // 如果选中值的长度和源数据的长度一样，返回true，就表示你已经选中了全部checkbox，那么就把true赋值给this.checkAll
            this.checkAll=true
          }else{
            this.checkAll=false
          }
        }
      }
   }
  };
</script>