element的el-checkbox-group复选框全选

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

const cityOptions = [
  { id: 1, name: "上海" },
  { id: 2, name: "北京" },
  { id: 3, name: "广州" },
  { id: 4, name: "深圳" }
];

 checkAll: false, // 是否全选
      checkedCities: [], // 选中值
      cities: cityOptions, 
      isIndeterminate: false

 // 全选方法
    handleCheckAllChange(val) {
      const checked = cityOptions.map(item => {
        return item.id;
      });
      this.checkedCities = val ? checked : [];
      this.isIndeterminate = false;
    },
    // 单选方法
    handleCheckedCitiesChange(value) {
      console.log("value :>> ", value);
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },