vue elementui 结合 el-checkbox-group 组件实现全选效果

<template>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckAllChange">
    <el-checkbox :indeterminate="isIndeterminate" @change="handleCheckedCitiesChange" checked="true">全选</el-checkbox>
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
  </el-checkbox-group>
</template>
 
<script>
export default {
  data() {
    return {
      checkedCities: ['上海', '北京'],
      cities: ['上海', '北京', '广州', '深圳'],
      isIndeterminate: true,
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>

这段代码实现了一个带有全选功能的多选框列表，当用户选择全选时，所有城市将被选中；取消全选时，所有城市将被取消。此外，代码还处理了不确定状态的逻辑，以便用户可以更好地了解他们选择的状态。