重写element多选框全选效果

模拟数据

data(){
  return {
    checkAll: false,// 全选状态
    // 每次存储选中的
    checkedCitiesActive:[

    ],
    // 模拟数据列表
    checkedCities: [
      {
        id:0,
        name:'第一'
      },
      {
        id:1,
        name:'第二'
      }
    ],
    isIndeterminate: true,// 设置 indeterminate 状态，只负责样式控制
  }
},

方法

methods:{
// 全选，全不选操作
  handleCheckAllChange(val) {
    val?( this.checkedCitiesActive = this.checkedCities.map((res)=>{return res.id})):(this.checkedCitiesActive=[],this.isIndeterminate = false);
  },
  // 单选操作
  handleCheckedCitiesChange(value) {
    let checkedCount = value.length;// 每次被选中的数组长度
    this.checkAll = checkedCount === this.checkedCities.length;
    this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkedCities.length;
  }
}