Select 选择器

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

基础用法

适用广泛的基础单选。

受控和非受控模式

VkSelect 组件支持两种使用模式：非受控模式（使用 v-model）和受控模式（使用 :value + 事件）。

非受控模式

使用 v-model 进行双向数据绑定，组件内部管理状态。

当前值:

受控模式

使用 :value 单向绑定配合 @change 或 @update:modelValue 事件，由父组件完全控制状态。

当前值:

多选模式的受控和非受控

多选模式同样支持受控和非受控两种模式。

非受控多选

当前值: []

受控多选

当前值: []

有禁用选项

在 vk-option 中，设定 disabled 值为 true，即可禁用该选项。

禁用状态

选择器不可用状态。

可清空单选

包含清空按钮，可将选择器清空为初始状态。

基础多选

适用性较广的基础多选，用 Tag 展示已选项。

可搜索

可以利用搜索功能快速查找选项。

不同尺寸

Select 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。

API

Select Props

名称	类型	默认值	说明
size	`'small' \| 'medium' \| 'large'`	`'medium'`	选择器大小
disabled	`boolean`	`false`	是否禁用
placeholder	`string`	`'请选择'`	占位符
clearable	`boolean`	`false`	是否可以清空选项
filterable	`boolean`	`false`	是否可搜索
multiple	`boolean`	`false`	是否多选
loading	`boolean`	`false`	是否正在加载
loadingText	`string`	`'加载中...'`	加载时显示的文字
noDataText	`string`	`'无数据'`	选项为空时显示的文字
noMatchText	`string`	`'无匹配数据'`	无匹配时显示的文字
customClass	`string`	`''`	自定义类名
customStyle	`string \| CSSProperties`	`''`	自定义样式

Select Events

名称	参数	说明
change	`(value: SelectValue \| SelectValue[]) => void`	选中值发生变化时触发
focus	`(evt: FocusEvent) => void`	获得焦点时触发
blur	`(evt: FocusEvent) => void`	失去焦点时触发
clear	`() => void`	可清空的单选模式下用户点击清空按钮时触发
visible-change	`(visible: boolean) => void`	下拉框出现/隐藏时触发
remove-tag	`(value: SelectValue) => void`	多选模式下移除tag时触发

Select Slots

名称	说明
default	Option 组件列表

Option Props

名称	类型	默认值	说明
label	`string`	`-`	选项的标签
value	`string \| number`	`-`	选项的值
disabled	`boolean`	`false`	是否禁用该选项

Option Events

名称	参数	说明
click	`(value: SelectValue) => void`	点击选项时触发

Option Slots

名称	说明
default	选项内容

Select 选择器 ​

基础用法 ​

受控和非受控模式 ​

非受控模式 ​

受控模式 ​

多选模式的受控和非受控 ​

非受控多选

受控多选

有禁用选项 ​

禁用状态 ​

可清空单选 ​

基础多选 ​

可搜索 ​

不同尺寸 ​

API ​

Select Props ​

Select Events ​

Select Slots ​

Option Props ​

Option Events ​

Option Slots ​