vue中el-checkbox全选、反选、多选

<template>
  <div>
    <el-checkbox
      v-model="checkAll"
      @change="handleCheckAllChange"
      :indeterminate="isIndeterminate"
      >全选</el-checkbox
    >
    <el-checkbox v-model="checkInvert" @change="handleInvertCheckChange"
      >反选</el-checkbox
    >
    <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>
  </div>
</template>

<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  data() {
    return {
      checkAll: false,
      checkInvert: false,
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      isIndeterminate: true,
    };
  },
  methods: {
    // 全选
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
      this.checkInvert = false;
    },
    // 反选
    handleInvertCheckChange(val) {
      let cities = this.cities;
      let checkedCities = this.checkedCities;
      if (checkedCities.length === 0) {
        checkedCities = val ? cities : [];
      } else if (checkedCities.length === cities.length) {
        this.checkedCities = [];
        this.checkAll = false;
      } else {
        let list = cities.concat(checkedCities).filter((v, i, array) => {
          return array.indexOf(v) === array.lastIndexOf(v);
        });
        this.checkedCities = list;
      }
    },
    // 多选
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      this.checkInvert = false;
    },
  },
};
</script>

<style>
</style>

接口获取省份

 <div>
    <el-checkbox
      v-model="checkAll"
      @change="handleCheckAllChange"
      :indeterminate="isIndeterminate"
      >全选</el-checkbox
    >
    <el-checkbox v-model="checkInvert" @change="handleInvertCheckChange"
      >反选</el-checkbox
    >
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox v-for="city in provinceList" :label="city" :key="city">{{
        city.label 
      }}</el-checkbox>
    </el-checkbox-group>
  </div>

        <div slot="footer" style="text-align:center;">
          <el-button @click="historyPriceFlag = false" type="primary">确定</el-button>
          <el-button @click="historyPriceFlag = false">取消</el-button>
        </div>

data

  provinceList: [],
  checkAll: false,
  checkInvert: false,
  checkedCities: ["上海", "北京"],
  isIndeterminate: true,

js

    // 全选
    handleCheckAllChange(val) {
      console.log(this.provinceList)
      this.checkedCities = val ? this.provinceList : [];
      this.isIndeterminate = false;
      this.checkInvert = false;
    },
    // 反选
    handleInvertCheckChange(val) {
      let cities = this.provinceList;
      console.log(cities)
      let checkedCities = this.checkedCities;
      if (checkedCities.length === 0) {
        checkedCities = val ? cities : [];
      } else if (checkedCities.length === cities.length) {
        this.checkedCities = [];
        this.checkAll = false;
      } else {
        let list = cities.concat(checkedCities).filter((v, i, array) => {
          return array.indexOf(v) === array.lastIndexOf(v);
        });
        this.checkedCities = list;
      }
    },
    // 多选
    handleCheckedCitiesChange(value) {
 
      console.log(value)
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.provinceList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.provinceList.length;
      this.checkInvert = false;
       console.log(this.provinceList)
    },

 

 created() {

    // 获取省市区列表

    getAreaList().then(res => {

      if (res.code == 200) {

        this.provinceList = res.data

      }

    })

  },