Select 选择器

当选项较多时，使用下拉菜单展示并选择内容。

基础用法

通过 options 数组配置选项，使用 v-model 绑定选中值。

可多选

通过 multiple 属性启用多选，选中项以标签形式展示。

多选标签折叠

通过 collapseTags 折叠多选标签，collapseTagsLimit 控制折叠前最多显示的标签数。

可搜索

通过 filterable 属性启用搜索过滤，快速定位选项。

分组选项

通过 optionGroups 属性传入分组数据，按类别展示选项。

创建新选项

通过 allowCreate 属性允许用户在搜索不到匹配项时创建新选项。需配合 filterable 使用。

远程搜索

通过 remote 和 remoteMethod 启用远程搜索，适合大数据量场景。

全选与反选

在多选模式下，下拉菜单顶部自动显示全选/反选栏，支持一键全选或取消全选。

虚拟滚动

通过 virtualScroll 属性启用虚拟滚动，适合 1000+ 选项的大数据量场景，大幅减少 DOM 节点数量。

大数据量示例

当选项数量达到 10,000+ 时，虚拟滚动可将 DOM 节点数从上万减少到几十个。以下示例展示 10,000 条数据的单选 + 搜索、以及多选 + 搜索场景。通过 estimatedOptionHeight 可自定义选项高度。

以下两个选择器均加载了 10,000 条选项，开启虚拟滚动后性能依然流畅。

可清空与尺寸

通过 clearable 属性显示清空按钮，size 属性调整选择器尺寸。

前缀图标与空状态

通过 prefix 插槽添加前缀内容，通过 empty 插槽自定义无数据时的展示。

🔍

禁用与加载状态

Select API

SelectOption 类型

interface SelectOption {
  label: string
  value: string | number
  disabled?: boolean
}

SelectOptionGroup 类型

interface SelectOptionGroup {
  label: string
  options: SelectOption[]
  disabled?: boolean
}

Props

参数	说明	类型	默认值
`modelValue`	绑定值	`string \| number \| (string \| number)[]`	`—`
`options`	选项数据源（扁平）	`SelectOption[]`	`[]`
`optionGroups`	分组选项数据源	`SelectOptionGroup[]`	`[]`
`multiple`	是否多选	`boolean`	`false`
`filterable`	是否可搜索过滤	`boolean`	`false`
`allowCreate`	是否允许创建新选项（需配合 filterable）	`boolean`	`false`
`clearable`	是否可清空	`boolean`	`false`
`disabled`	是否禁用	`boolean`	`false`
`loading`	是否显示加载中	`boolean`	`false`
`loadingText`	加载中显示的文案	`string`	`加载中...`
`remote`	是否远程搜索	`boolean`	`false`
`remoteMethod`	远程搜索方法	`(query: string) => Promise<SelectOption[]>`	`—`
`collapseTags`	多选时是否折叠标签	`boolean`	`false`
`collapseTagsLimit`	折叠前最多显示的标签数	`number`	`1`
`virtualScroll`	是否启用虚拟滚动（推荐 1000+ 选项时开启）	`boolean`	`false`
`estimatedOptionHeight`	虚拟滚动选项的预估行高（px）	`number`	`36`
`placeholder`	占位文本	`string`	`请选择`
`size`	选择器尺寸	`large \| medium \| small`	`medium`
`noDataText`	无数据时显示的文本	`string`	`暂无数据`
`noMatchText`	无匹配时显示的文本	`string`	`无匹配数据`

Events

事件名	说明	回调参数
`update:modelValue`	绑定值更新时触发	`(value: SelectValue)`
`change`	选中值变化时触发	`(value: SelectValue)`
`focus`	获取焦点时触发	`(event: FocusEvent)`
`blur`	失去焦点时触发	`(event: FocusEvent)`
`clear`	点击清空按钮时触发	`()`
`visible-change`	下拉菜单显隐变化时触发	`(visible: boolean)`
`remove-tag`	多选移除标签时触发	`(tag: string \| number)`
`search`	搜索输入时触发	`(query: string)`
`create-tag`	创建新选项时触发	`(value: string)`

Slots

插槽名	说明
`prefix`	选择器前置内容（如前缀图标）
`empty`	无选项时的自定义内容

Select 选择器 ​

基础用法 ​

可多选 ​

多选标签折叠 ​

可搜索 ​

分组选项 ​

创建新选项 ​

远程搜索 ​

全选与反选 ​

虚拟滚动 ​

大数据量示例 ​

可清空与尺寸 ​

前缀图标与空状态 ​

禁用与加载状态 ​

Select API ​

SelectOption 类型 ​

SelectOptionGroup 类型 ​

Props ​

Events ​

Slots ​