element-ui 实现全选 取消全选

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

<script lang="ts" setup>

import { ref } from 'vue'

const checkAll = ref(false)

const isIndeterminate = ref(true)

const checkedCities = ref([])

const cities = ref([{ id: '004BE8563B8E67A8762A814E2E8BB314', label: 'CACB20CA-2' },

{ id: '004BE8563B8E67A8762A814E2E8BB14', label: 'CACB20CA-4' },

{ id: '004BE8563B8E67A8762A814E2E8BB314', label: 'BNB687X8' }])

const handleCheckAllChange = (val: boolean) => {

  let item = []

  for (let i = 0; i < cities.value.length; i++) {

  item.push(cities.value[i].label)

  }

  checkedCities.value = val ? item : []

  isIndeterminate.value = false

}

const handleCheckedCitiesChange = (value: string[]) => {

  const checkedCount = value.length

  checkAll.value = checkedCount === cities.value.length

  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.value.length

}

</script>