el-checkbox-group实现全选反选效果

html

 <el-checkbox-group v-model="SelectedCheckList">
                <el-checkbox
                  v-for="(item, index) in state.checkList"
                  :label="item.value"
                  :key="index"
                  @change="checkFn(item.value)"
                  :value="item.value"
                >
                  {{ item.label }} （{{ item.num }}）
                </el-checkbox>
              </el-checkbox-group>

数据

const SelectedCheckList = ref(['all', 0, 1, 2, 3, 4, 5, 6])

const state = reactive({
  checkList: [
    { label: '全部', value: 'all', num: 0 },
    { label: '空闲', value: 0, num: 0 },
    { label: '广播中', value: 1, num: 0 },
    { label: '拨号中', value: 2, num: 0 },
    { label: '对讲中', value: 3, num: 0 },
    { label: '喊话中', value: 4, num: 0 },
    { label: '监听中', value: 5, num: 0 },
    { label: '断线', value: 6, num: 0 },
  ]
})

逻辑

const checkFn = (e) => {
  //点击全部
  if (e == 'all') {
    //全部不在选中状态
    if (SelectedCheckList.value.findIndex(item => item == e) != -1) {
      SelectedCheckList.value = ['all', 0, 1, 2, 3, 4, 5, 6]
    } else {
      SelectedCheckList.value = []
    }

  } else {
    const allIndex = SelectedCheckList.value.findIndex(item => item == 'all');

    // 如果其他状态全选中且 'all' 已经在选中列表中，取消 'all' 的选中
    if (allIndex != -1 && SelectedCheckList.value.length !== state.checkList.length) {
      SelectedCheckList.value.splice(allIndex, 1); // 取消选中 "全部"
    }

    // 检查是否所有其他状态都被选中，如果是，自动勾选 "全部"
    if (SelectedCheckList.value.length === state.checkList.length - 1) {
      SelectedCheckList.value.push('all'); // 自动勾选 "全部"
    }
  }


};