vue+ElementUI中的多选框中的不确定状态

用indeterminate与checkAll控制不确定状态

checkbox有三种状态全选(显示的'√'),选中部分(显示的'-'),全不选(啥都没显示)
对于indeterminate和v-model绑定的a和b的值
如果true true 或者 true false样式为-
如果false true样式为√
如果false false样式为不勾

示例为elementUI官网上的案例

<template>
  <div>
    <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>
  </div>
</template>
<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  name: "checkbox",
  data() {
    return {
      checkAll: false,
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      isIndeterminate: true
    };
  },
  methods: {
    handleCheckAllChange(val) {
      //val值为布尔类型的值，若val为false则this.checkedCities为空，否则全部选中
      this.checkedCities = val ? cityOptions : [];
      //设置isIndeterminate，看model的布尔值，要么全选要么全不选
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      //获取修改过的cities的值的长度
      let checkedCount = value.length;
      //当修改后的长度=全部的长度则为true，否则为false
      this.checkAll = checkedCount === this.cities.length;
      //当修改后的长度不等于全部的长度时，isIndeterminate为false
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }
  }
};
</script>