AntDeisgn中checkbox group的使用

<template>
  <!-- 弹窗类型选择 -->
    <div>
        <a-modal :visible="state.modalAttr.visible" title="规选类型" width="680px" @ok="showModal" @cancel="hideModal">
            <a-checkbox
                    v-model:checked="state.checkboxAttr.checkAll"
                    :indeterminate="state.checkboxAttr.indeterminate"
                    @change="onCheckAllChange"
            >
                <span style="color: white">全选</span>
            </a-checkbox>
            <a-checkbox-group v-model:value="state.checkboxAttr.checkedList">
                <a-checkbox v-for="opt in state.categoryOpts" :value="opt.code" @change="onChange">
                    <span style="color: white">{{ opt.name }}</span>
                </a-checkbox>
            </a-checkbox-group>
        </a-modal>
    </div>
</template>

<script setup>
import {defineComponent, ref, reactive, watch, defineExpose, defineEmits, toRaw, onBeforeUnmount, onMounted} from 'vue';

const state = reactive({
    modalAttr: {
        visible: true,
    },
    checkboxAttr: {
        indeterminate: true,
        checkedList: [],
        checkAll: false,
    },
    categoryOpts: [{
        name: '实有单位',
        code: 'SYDW',
    }, {
        name: '标准地址',
        code: 'JZW',
    }, {
        name: '实有房屋',
        code: 'SYFW'
    }, {
        name: '实有人口',
        code: 'SYRK'
    }, {
        name: '层户信息',
        code: 'CHJGXXB',
    }]
})

const showModal = () => {
    console.log('state.checkboxAttr.checkedArr::: ', state.checkboxAttr.checkedList)
    return;
    state.modalAttr.visible = true;
}

const hideModal = () => {
    state.modalAttr.visible = false;
}

const onChange = (e, index) => {//单个选择
    state.checkboxAttr.indeterminate = !!state.checkboxAttr.checkedList.length && state.checkboxAttr.checkedList.length < state.categoryOpts.length;
    state.checkboxAttr.checkAll = state.checkboxAttr.checkedList.length === state.categoryOpts.length;
}

const onCheckAllChange = (e, index) => {//选择全部的事件
    if (e.target.checked) {
        state.checkboxAttr.indeterminate = false;
        state.checkboxAttr.checkedList = state.categoryOpts.map(item => {
            return item?.code;
        })
    } else {
        state.checkboxAttr.indeterminate = false;
        state.checkboxAttr.checkedList = []
    }
}

watch
(
    () => state.checkboxAttr.checkedList,
    val => {
        state.checkboxAttr.indeterminate = false;
        state.checkboxAttr.checkAll = state.checkboxAttr.checkedList.length === 5;
        console.log('state.checkboxAttr.checkedList:::: ', state.checkboxAttr.checkedList)
    },
);


</script>

<style scoped lang="scss">
:deep(ant-modal-title) {
  color: white;
}
</style>