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

在Ant Design Vue中，单选框（Radio）默认是单选功能，即用户只能选择一个选项。如果你需要实现多选功能，应该使用复选框（Checkbox）而不是单选框。复选框允许用户选择多个选项。

使用复选框实现多选功能

以下是一个使用Ant Design Vue中的复选框（Checkbox）实现多选功能的示例：

<template>
  <a-checkbox-group v-model:value="checkedList">
    <a-checkbox value="A">选项 A</a-checkbox>
    <a-checkbox value="B">选项 B</a-checkbox>
    <a-checkbox value="C">选项 C</a-checkbox>
    <a-checkbox value="D">选项 D</a-checkbox>
  </a-checkbox-group>
</template>

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

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

    return {
      checkedList,
    };
  },
});
</script>

解释：

• a-checkbox-group：用于包裹一组复选框，v-model:value绑定到一个数组checkedList，用于存储用户选择的选项。
• a-checkbox：每个复选框对应一个选项，value属性指定该选项的值。
• checkedList：是一个数组，存储用户选择的选项值。

注意事项：

• 如果你确实需要使用单选框（Radio）来实现多选功能，可能需要自定义组件或使用其他UI库。但通常情况下，复选框是更适合实现多选功能的组件。

自定义单选框实现多选（不推荐）

如果你坚持使用单选框实现多选功能，可以通过自定义逻辑来实现，但这并不是推荐的做法。以下是一个简单的示例：

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

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

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

    const handleChange = (value) => {
      const index = selectedValues.value.indexOf(value);
      if (index === -1) {
        selectedValues.value.push(value);
      } else {
        selectedValues.value.splice(index, 1);
      }
    };

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

解释：

• a-radio-group：包裹单选框组，v-model:value绑定到selectedValues。
• handleChange：手动处理单选框的点击事件，将选中的值添加到selectedValues数组中，或从数组中移除。

总结：

• 如果你需要多选功能，推荐使用复选框（Checkbox）。
• 如果坚持使用单选框实现多选功能，可以通过自定义逻辑实现，但这并不是最佳实践。