上面那个问题的子组件代码是<template> <a-checkbox-group @change="handleChange"> <a-checkbox v-for="option in options" :key="option.value" :value="option.value" >{{ option.label }} </a-checkbox> </a-checkbox-group> </template> <script lang="ts"> import { CheckboxGroup, Checkbox } from "ant-design-vue"; let ACheckboxGroup = CheckboxGroup; let ACheckbox = Checkbox; import { defineComponent, ref, watch } from "vue"; export default defineComponent({ name: "w-checkbox-group", props: { options: { type: Array, required: true, }, value: { type: Array, default: () => [], }, }, emits: ["update:value"], components: { ACheckboxGroup, ACheckbox, }, setup(props, { emit }) { const selected = ref(props.value); const handleChange = (checkedValues: any) => { // const v = checkedValues.find( // (item: any) => !selected.value.includes(item) // ); // selected.value = [v]; if (checkedValues.length > 1) { selected.value = [checkedValues[checkedValues.length - 1]]; } else { selected.value = checkedValues; } console.log("update selected", selected.value); emit("update:value", selected.value); }; return { selected, handleChange, }; }, }); </script>

这是一个基于 Ant Design Vue 组件库开发的多选框组件，使用了 CheckboxGroup 和 Checkbox 组件。props 中传入了 options 和 value，分别表示选项和已选中的值。通过 selected 变量和 handleChange 方法对已选中的值进行管理，并且在更新后通过 emit 触发 update:value 事件通知父组件进行更新。其中，在 handleChange 方法中，如果选中的值数量大于 1，则只保留最后一个选中的值。