Vue3 - Ant Design Vue 选择器 a-select 同时支持 “下拉选择和手动输入“,既能下拉框选择又可以像 input 一样输入文字内容,让 Select选择器组件能选也能输入文字
在Ant Design Vue中,a-select
组件原生支持自定义输入,你可以使用a-select
的allow-create
属性来实现手动输入的功能。以下是一个简单的例子:
<template>
<a-select
mode="multiple"
v-model:value="value"
style="width: 100%"
placeholder="请选择或手动输入"
:options="options"
allow-create
></a-select>
</template>
<script setup>
import { ref } from 'vue';
import { Select } from 'ant-design-vue';
const value = ref([]);
const options = ref([
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
]);
</script>
在这个例子中,用户可以从下拉菜单中选择现有选项,也可以输入新的选项(如果它不存在于选项列表中)。allow-create
属性允许用户输入新的选项,并且这些新的选项会被添加到选项列表中。
评论已关闭