Select

这是一个常见的选择器，使用下拉菜单展示并选择内容。

基础使用

传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

Please Select

Vue

Please Select

Vue

隐藏源代码

禁用选项

options 中，选项置 disabled 为 true 可禁用选项。

Please Select

Vue

Please Select

Vanilla

隐藏源代码

分组

options 中，也支持传入选项组。

Please Select

Vue

隐藏源代码

远程加载

设置 loading 属性和监听 focus 事件，实现加载搜索时的 UI 变化。

Please Select

隐藏源代码

多选

设置 multiple 属性开启多选模式。

Please Select

隐藏源代码

折叠标签

多选时，设置 collapseTags 属性可开启折叠标签（默认为 false），maxDisplayTags 属性设置最大展示标签，collapseTagsPopover 设置折叠后是否通过弹出框展示被折叠的标签（默认为 true）。

Please select

Please select

隐藏源代码

搜索选项

设置 filterable 属性可开启搜索选项。

对于搜索的输入，传入 inputValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultInputValue 属性作为默认值。

inputValue:

Please select

Please select

隐藏源代码

添加选项

设置 creatable 属性可添加选项，添加的选项类型为 string，注意要开启 filterable。

Please select

Please select

隐藏源代码

虚拟列表

virtualScroll 属性开启虚拟列表，选项数据量大时可以开启提高性能。

Please Select

隐藏源代码

选项自定义渲染

通过插槽自定义渲染选项。

Please input

隐藏源代码

更多配置

选择器 Select 还拥有 Input、InputTag、AutoComplete 组件的部分功能。

Disabled, Readonly, Loading & Clearable

Please input

Please input

Please input

Please input

Shape

Please input

Please input

Size

Please input

Please input

Please input

Slot

prefix

Please input

suffix

Composite

Please input

Status

Please input

Please input

Please input

Please input

Expose

Please input

Tag Render

Please input

隐藏源代码

API

SelectProps

属性	类型	可选	默认值	描述	版本
modelValue	any	是		选择器的值（受控模式），支持 v-model。	0.0.2
defaultValue	any	是		选择器的默认值（非受控模式）。	0.0.2
options	string	是		选项列表。	0.0.2
placeholder	string	是		占位符文本。	0.0.2
disabled	boolean	是	false	是否禁用。	0.0.2
readonly	boolean	是	false	是否只读。	0.0.2
clearable	boolean	是	false	是否显示清除按钮。	0.0.2
multiple	boolean	是	false	是否开启多选。	0.0.2
loading	boolean	是	false	是否显示加载状态。	0.0.2
inputValue	string | null	是		搜索选项输入的文本值（受控模式），支持 v-model。	0.0.2
defaultInputValue	string | null	是		搜索选项输入的默认文本值（非受控模式）。	0.0.2
filterable	boolean	是	false	可否搜索选项。	0.0.2
shouldShowPopover	(value: string, optionsFiltered: (string | SelectOption | SelectGroupOption)[]) => boolean	是		是否展示弹出框的函数。	0.0.2
filter	(keyword: string, options: (string | SelectOption | SelectGroupOption)[]) => (string | SelectOption | SelectGroupOption)[]	是		筛选选项的函数。	0.0.2
creatable	boolean	是	false	可否创建选项，需要开启 filterable。	0.0.2
collapseTags	boolean	是	false	是否开启折叠标签。	0.0.2
maxDisplayTags	number	是		展示标签的最大数量，开启 collapseTags 后生效。	0.0.2
collapseTagsPopover	boolean	是	true	是否在弹出框中展示被折叠的标签，开启 collapseTags 后生效。	0.0.2
virtualScroll	boolean	是	false	是否开启虚拟滚动。	0.0.3
virtualListProps	Omit<VirtualListProps, 'list' | 'fixedHeight'> & RestAttrs	是		虚拟列表属性。	0.0.3
tagProps	Omit<TagProps, 'size' | 'disabled' | 'closable'> & EmitEvent<TagEvents> & RestAttrs	是		标签的属性。	0.0.3
size	'medium' | 'large' | 'small'	是	'medium'	选择器尺寸。	0.0.2
shape	'rect' | 'round'	是	'rect'	选择器形状。	0.0.3
borderRadius	NumberOrPercentage | NumberOrPercentage[]	是		圆角半径，优先级高于 shape，与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。	0.0.2
status	'success' | 'warning' | 'error' | 'normal'	是	'normal'	表单验证状态。	0.0.2
tagTheme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'	是	'info'	Deprecated 标签的 theme 属性，设置标签主题颜色。	0.0.2
tagVariant	'primary' | 'plain' | 'outline'	是	'plain'	Deprecated 标签的 variant 属性，设置标签样式变体。	0.0.2
tagColor	string	是		Deprecated 标签的 color 属性，自定义标签颜色。	0.0.2
popoverProps	Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>	是		标签折叠时，弹出框 Popover 组件的属性。	0.0.3
popoverProps	Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>	是		标签折叠时，弹出框 Popover 组件的属性。	0.2.0
optionsDestroyOnHide	boolean	是	false	下拉选项是否会在隐藏时销毁。	0.0.3
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，可能会影响性能。	0.1.0

SelectEvents

事件	参数	描述	版本
input	value: string, e: Event	搜索选项输入时的回调。	0.0.2
update:modelValue	value: any	更新 modelValue 的回调。	0.0.2
update:inputValue	value: string	更新 inputValue 的回调。	0.0.2
change	value: any	选择器内容变化时的回调。	0.0.2
change	value: string, e: Event | undefined	选择器内容变化时的回调。	0.0.2
clear	value: any	点击清除文本按钮，清除内容时的回调。	0.0.2
blur		失焦时的回调。	0.0.2
focus	event: FocusEvent	聚焦时的回调。	0.0.2
select	value: any, option: string | SelectOption, e: MouseEvent	选中选项的回调。	0.0.2
tagClose	value: any, e: MouseEvent	关闭标签时的回调。	0.0.2
dropdownOpen		下拉面板展示的回调。	0.2.0
dropdownClose		下拉面板关闭的回调。	0.2.0

SelectSlots

插槽	参数	描述	版本
prefix		前缀内容。	0.0.2
suffix		后缀内容。	0.0.2
option	option: string | SelectOption	选项内容。	0.0.2
group-label	option: SelectGroupOption	选项组的标签名。	0.0.2
tag	value: any, label: string, index: number, disabled: boolean, readonly: boolean	标签内容。	0.0.3
label	value: any, label: string, disabled: boolean, readonly: boolean	已选择的内容。	0.0.3

SelectExpose

属性	类型	可选	默认值	描述	版本
focus	() => void	否		聚焦当前控件。	0.0.2
blur	() => void	否		取消聚焦当前控件。	0.0.2
clear	() => void	否		清空当前输入内容。	0.0.2

Option, GroupOption

export interface Option<T = any> {
	value: T
	label: string
}

export interface GroupOption<T = any> {
	children: (Option<T> | string)[]
	type: 'group'
}

OptionListOption, OptionListOption

export interface OptionListOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}

export interface OptionListGroupOption extends GroupOption {
	label: string
	key: string | number | symbol
	children: (OptionListOption | string)[]
}

SelectOption, SelectGroupOption

export interface SelectOption extends OptionListOption<any> {
}

export interface SelectGroupOption extends OptionListGroupOption {
	children: (SelectOption | string)[]
}

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}