Element UI checkbox 全選操作分析

引入checkbox 組件

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

 

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; //同全選按鈕事件裏面的那個樣式控制
}

}，

感覺api裏面寫的太麻煩了，不易懂，自己寫了一個，如下：

data裏面的數據和上面一樣，這裏不做粘貼複製了

<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>

handleCheckAllChange(val) {
    if(this.checkAll){
        this.cities.forEach(item=>{
            this.checkedCities.push(item.name)
        })
    }else {
        this.checkedCities = []
    }

},
handleCheckedCitiesChange(value) {
    console.log(this.checkedCities);
    if(this.checkedCities.length == this.cities.length){
        this.checkAll=true
    }else{
        this.checkAll=false
    }
}