Ant Design Vue单选框如何实现多选功能？

Ant Design Vue 的单选框（a-radio）默认是单选功能，即用户只能选择一个选项。如果你需要实现多选功能，可以使用 a-checkbox 组件，因为 a-checkbox 是专门用于多选的。

不过，如果你确实需要基于单选框实现多选功能，可以通过自定义逻辑来实现。以下是一个示例，展示如何使用 a-radio 组件实现多选功能：

<template>
  <div>
    <a-radio-group v-model:value="selectedValues" @change="handleChange">
      <a-radio :value="1">选项1</a-radio>
      <a-radio :value="2">选项2</a-radio>
      <a-radio :value="3">选项3</a-radio>
    </a-radio-group>
    <p>已选中的值: {{ selectedValues.join(', ') }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedValues = ref([]);

    const handleChange = (e) => {
      const value = e.target.value;
      if (selectedValues.value.includes(value)) {
        selectedValues.value = selectedValues.value.filter(item => item !== value);
      } else {
        selectedValues.value.push(value);
      }
    };

    return {
      selectedValues,
      handleChange,
    };
  },
};
</script>

解释：

1. a-radio-group: 使用 a-radio-group 包裹 a-radio 组件，以便管理单选按钮的状态。
2. v-model:value: 使用 v-model 绑定 selectedValues，这是一个数组，用于存储用户选择的多个值。
3. handleChange: 在 handleChange 方法中，根据用户的选择更新 selectedValues 数组。如果用户选择的选项已经在数组中，则移除它；如果不在数组中，则添加它。

注意：

• 这种方法虽然可以实现多选功能，但并不符合单选框的常规使用场景。通常，多选功能应该使用 a-checkbox 组件来实现。
• 如果你需要更复杂的多选功能，建议直接使用 a-checkbox 组件，或者使用 a-select 组件的多选模式。

使用 a-checkbox 实现多选：

如果你决定使用 a-checkbox 来实现多选功能，可以参考以下代码：

<template>
  <div>
    <a-checkbox-group v-model:value="selectedValues">
      <a-checkbox :value="1">选项1</a-checkbox>
      <a-checkbox :value="2">选项2</a-checkbox>
      <a-checkbox :value="3">选项3</a-checkbox>
    </a-checkbox-group>
    <p>已选中的值: {{ selectedValues.join(', ') }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedValues = ref([]);

    return {
      selectedValues,
    };
  },
};
</script>

这种方式更加简洁且符合用户习惯。