CreatableSelect 可创建选择

下拉选择 + 可选顶部搜索 / 底部自定义添加；支持单选 / 多选，可嵌入 filter-shell（embedded）。

示例

本地搜索 + 可创建；多选示例关闭添加、仅搜索。

皮质类型

牛皮

箱子类型

test

<script setup lang="ts">
import { ref } from 'vue'
import { RdCreatableSelect } from '@rd-element/ui'

const demoLeatherType = ref('cowhide')
const demoBoxTypes = ref(['test'])

const leatherOptions = [
  { label: '牛皮', value: 'cowhide' },
  { label: '羊皮', value: 'sheepskin' },
  { label: '无', value: 'none' },
]
const boxTypeOptions = [
  { label: '翻盖式', value: 'flip-top' },
  { label: 'test', value: 'test' },
  { label: '定制', value: 'custom' },
]
</script>

<template>
  <div class="creatable-select-demo">
    <RdCreatableSelect
      v-model="demoLeatherType"
      label="皮质类型"
      :options="leatherOptions"
      filterable
      placeholder="请选择"
    />
    <RdCreatableSelect
      v-model="demoBoxTypes"
      label="箱子类型"
      :options="boxTypeOptions"
      multiple
      collapse-tags
      :max-collapse-tags="1"
      filterable
      :allow-create="false"
      placeholder="请选择"
    />
  </div>
</template>

远程搜索

remote + remoteMethod：由父级按关键词更新 options，可用 loading 展示加载态。

远程搜索

请选择

<script setup lang="ts">
import { ref } from 'vue'
import { RdCreatableSelect, type CreatableSelectOption } from '@rd-element/ui'

const value = ref('')
const loading = ref(false)
const options = ref<CreatableSelectOption[]>([
  { label: '牛皮', value: 'cowhide' },
  { label: '羊皮', value: 'sheepskin' },
])

const all: CreatableSelectOption[] = [
  { label: '牛皮', value: 'cowhide' },
  { label: '羊皮', value: 'sheepskin' },
  { label: '猪皮', value: 'pigskin' },
  { label: '超纤', value: 'microfiber' },
]

function remoteMethod(query: string) {
  loading.value = true
  window.setTimeout(() => {
    const q = query.trim().toLowerCase()
    options.value = q
      ? all.filter((o) => o.label.includes(q) || o.value.includes(q))
      : all.slice(0, 2)
    loading.value = false
  }, 400)
}
</script>

<template>
  <RdCreatableSelect
    v-model="value"
    label="远程搜索"
    :options="options"
    filterable
    remote
    :remote-method="remoteMethod"
    :loading="loading"
    :allow-create="false"
    search-placeholder="输入关键词搜索"
  />
</template>

API

Attributes

属性名	说明	类型	默认值
v-model	选中值	string | string[]	—
options	选项列表	CreatableSelectOption[]	—
label	表单字段标签	string	—
multiple	多选	boolean	false
allowCreate	是否显示底部自定义添加	boolean	true
filterable	是否显示顶部搜索框	boolean	false
searchPlaceholder	搜索框占位	string	'搜索'
remote	远程搜索（由父级更新 options）	boolean	false
remoteMethod	远程搜索方法	(query: string) => void	—
remoteDebounce	远程搜索防抖毫秒	number	300
loading	远程搜索加载中	boolean	false
filterMethod	自定义本地过滤	(query, option) => boolean	—
emptyText	无匹配选项文案	string	'无匹配选项'
embedded	嵌入 filter-shell 时去边框	boolean	false

Events

事件名	说明	类型
update:modelValue	值变更	(value: string | string[]) => void
change	值变更（确认）	(value: string | string[]) => void
option-add	新增自定义选项	(option: CreatableSelectOption) => void
search	搜索关键词变化	(query: string) => void