使用 Ant Design Vue 中的选择器（Select）组件

实现单选功能

<template>
  <a-select v-model="selectedOption" placeholder="请选择">
    <a-select-option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</a-select-option>
  </a-select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'option2', // 设置为 'option2' 作为默认值
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
      ],
    };
  },
};
</script>

在这个示例中，我们使用a-select作为选择器的外层容器。通过v-model指令绑定selectedOption的值，实现对选择器选项的双向绑定。

在选择器内部，使用v-for指令遍历options数组，生成选择器的选项。每个选项都被包裹在a-select-option标签中，并通过:value绑定选项的值，:key指定选项的唯一标识。

实现多选功能

如果你想要在 Ant Design Vue 的 Select 组件中实现多选功能，你可以使用 mode 属性来将选择器设置为多选模式。以下是一个示例代码：

<template>
  <a-select v-model="selectedOptions" mode="multiple" placeholder="请选择">
    <a-select-option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</a-select-option>
  </a-select>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: ['option1', 'option3'], // 设置默认值
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
      ],
    };
  },
};
</script>

在这个示例中，我们将 mode 属性设置为 "multiple"，从而启用多选模式。通过使用 v-model 指令绑定一个数组 selectedOptions，我们可以获取用户选择的多个选项。

用户可以通过点击选项来进行选择和取消选择，所选的选项会被自动添加到 selectedOptions 数组中。你可以根据需要对 selectedOptions 进行进一步处理或使用。