I. Examples of the official website

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">select 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>
Copy the code
data(){
  return {
    checkAll: false./ / all
    cities: [{"name":"Higher"."value":"928"
      },
      {
        "name":"High"."value":"929"
      },
      {
        "name":"Three high"."value":"930"}]./ / the data source
    checkedCities: [].// Binding is selected by default
    isIndeterminate:false.// Set the indeTerminate state, only style control
  }
  
  methods: {// Select all -- events that are triggered when the binding value changes
    handleCheckAllChange(val) {
      console.log(val) // The value of val is a Boolean value, all selected false and unselected true
      this.cities.forEach(item= >{ // When all is selected, loop over the source data, adding each item to the default array
        this.checkedCities.push(item.name)
      })  
      this.checkedCities = val ? this.checkedCities : []; // A ternary expression, if val is true, assigns the currently selected value to itself by default, so that all elements on the page are selected. If false, deselect all
      this.isIndeterminate = false;  // The official website says that this is a style control, is to control, when half select, do not matter, depending on your needs
    },
      
    // checkbox check -- the event that is triggered when the binding value changes
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;   // Select the length of the value
      this.checkAll = checkedCount === this.cities.length;  // If the length of the selected value is the same as the length of the source data, return true, indicating that you have checked all the boxes, then assign true to this.checkAll
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; // Same style control as in the all button event}},Copy the code

There are two properties that control the checkbox selection: IndeTerminate and checkAll. When indeterminate is false and checkAll is false, the state is unchecked. When indeTerminate is true and checkAll is false, the state is half-selected. When indeterminate is false and checkAll is true, the state is all selected. To change the checkbox status to unchecked, you should change indeTerminate and checkAll to false.

Two. Furnace reconstruction

I feel the API is too troublesome to understand, so I wrote one myself, as follows:

<el-checkbox v-model="checkAll" @change="handleCheckAllChange">select all</el-checkbox>

<el-checkbox v-for="(city,i) in cities" :label="city.name" :key="i" v-model="checkedCities" @change="handleCheckedCitiesChange">
  {{city.name}}
</el-checkbox>
Copy the code
data(){
  return {
    checkAll: false./ / all
    cities: [{"name":"Higher"."value":"928"
      },
      {
        "name":"High"."value":"929"
      },
      {
        "name":"Three high"."value":"930"}]./ / the data source
    checkedCities: [].// Binding is selected by default
    isIndeterminate:false.// Set the indeTerminate state, only style control
  }

  methods: {// Select all -- events that are triggered when the binding value changes
    handleCheckAllChange(val) {
      if(this.checkAll){
        this.cities.forEach(item= >{ // When all is selected, loop over the source data, adding each item to the default array
          this.checkedCities.push(item.name)
        })
      }else {
        this.checkedCities = []
      }

    },  

    // checkbox check -- the event that is triggered when the binding value changes
    handleCheckedCitiesChange(value) {
      console.log(this.checkedCities);
      if(this.checkedCities.length == this.cities.length){ // If the length of the selected value is the same as the length of the source data, return true, indicating that you have checked all the boxes, then assign true to this.checkAll
        this.checkAll=true
      }else{
        this.checkAll=false}}}Copy the code