Ant Design Vue单选框如何实现多选效果？

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

使用 a-checkbox 实现多选效果

a-checkbox 组件允许用户选择多个选项，适合实现多选效果。

示例代码

<template>
  <a-checkbox-group v-model:value="selectedOptions">
    <a-checkbox value="option1">选项1</a-checkbox>
    <a-checkbox value="option2">选项2</a-checkbox>
    <a-checkbox value="option3">选项3</a-checkbox>
  </a-checkbox-group>
</template>

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

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

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

解释

1. a-checkbox-group: 这是一个复选框组，用于包裹多个 a-checkbox 组件。v-model:value 用于绑定选中的值，selectedOptions 是一个数组，存储用户选择的选项。

2. a-checkbox: 每个 a-checkbox 代表一个选项，value 属性指定该选项的值。

3. selectedOptions: 这是一个响应式变量，用于存储用户选择的选项。由于是多选，selectedOptions 是一个数组。

注意事项

• 如果你确实需要使用单选框（a-radio）来实现多选效果，可能需要自定义逻辑，但这通常不符合用户习惯，建议使用 a-checkbox 来实现多选效果。

自定义多选逻辑（不推荐）

如果你坚持使用 a-radio 实现多选效果，可以通过自定义逻辑来实现，但这通常会导致用户体验不佳。

<template>
  <div>
    <a-radio-group v-model:value="selectedOption">
      <a-radio value="option1">选项1</a-radio>
      <a-radio value="option2">选项2</a-radio>
      <a-radio value="option3">选项3</a-radio>
    </a-radio-group>
    <a-button @click="addSelection">添加选择</a-button>
    <div>已选选项: {{ selectedOptions }}</div>
  </div>
</template>

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

export default {
  setup() {
    const selectedOption = ref('');
    const selectedOptions = ref([]);

    const addSelection = () => {
      if (selectedOption.value && !selectedOptions.value.includes(selectedOption.value)) {
        selectedOptions.value.push(selectedOption.value);
      }
    };

    return {
      selectedOption,
      selectedOptions,
      addSelection,
    };
  },
};
</script>

解释

1. a-radio-group: 用于包裹多个 a-radio 组件，v-model:value 绑定当前选中的单选项。

2. addSelection: 点击按钮时，将当前选中的单选项添加到 selectedOptions 数组中。

3. selectedOptions: 存储用户选择的多个选项。

总结

• 推荐使用 a-checkbox 来实现多选效果。
• 使用 a-radio 实现多选效果需要自定义逻辑，但通常不推荐。

希望这些信息对你有帮助！