ElementUi 全选功能实现

每次使用官方的示例都会被坑一下（可能是我的理解不够透彻吧，不记录一下保不准下次依旧会忘）， 故此今天做个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;
  }
}