Skip to content

Select 选择器

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

基础用法

适用广泛的基础单选

有禁用选项

在选项中,设定 disabled 值为 true,即可禁用该选项

禁用状态

选择器不可用状态

可清空

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

可搜索

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

多选

支持多选,v-model 绑定数组。

基础多选(标签)

多选选择器默认会在输入框中使用标签展示已选项。

折叠标签

通过 collapse-tags 折叠展示标签,仅显示前若干个,剩余以 + N 显示。

折叠标签 Tooltip

可通过 collapse-tags-tooltip+ N 上显示被折叠项的标签文案(采用原生 title 简化表现)。

指定最多展示的标签数量

使用 max-collapse-tags 控制折叠模式下可见的标签数量。

不同尺寸

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

大数据与虚拟滚动

当选项数量较大(如 1000+)时,建议开启虚拟滚动,仅渲染可视区域内的选项,显著提升打开与滚动性能。

  • 开启方式:设置 virtualtrue
  • 可选配置:item-height(默认 34,与样式一致,可不传;如自定义选项高度需同步传入)、keeps(视窗保留项数)、buffer(前后缓冲项数)。
  • 建议同时开启 filterable,结合内置防抖过滤,搜索体验更佳。

Select Attributes

参数说明类型可选值默认值
model-value / v-model绑定值string / number / array
multiple是否多选booleanfalse
collapse-tags折叠多选标签,显示 + Nbooleanfalse
collapse-tags-tooltip折叠标签显示 tooltip(使用 title)booleanfalse
max-collapse-tags折叠模式下最多显示的标签数量number1
options选项数据SelectOption[][]
placeholder占位符string请选择
disabled是否禁用booleanfalse
clearable是否可以清空选项booleanfalse
filterable是否可搜索booleanfalse
size输入框尺寸stringlarge / default / smalldefault
no-data-text选项为空时显示的文字string无数据
virtual是否启用虚拟滚动booleanfalse
item-height选项高度(用于虚拟滚动估算;默认与样式一致为 34,可不传)number34
keeps视窗保留项数(虚拟滚动)number12
buffer前后缓冲项数(虚拟滚动)number3

SelectOption

参数说明类型可选值默认值
label选项的标签string
value选项的值string / number
disabled是否禁用该选项booleanfalse

Select Events

事件名称说明回调参数
change选中值发生变化时触发目前的选中值
clear用户点击清空按钮时触发
focus当 input 获得焦点时触发(event: Event)
blur当 input 失去焦点时触发(event: Event)

Select Methods

方法名说明参数
focus使 input 获取焦点
blur使 input 失去焦点

键盘操作

按键说明
Enter选择当前高亮的选项
Escape关闭下拉菜单
ArrowUp向上移动高亮选项
ArrowDown向下移动高亮选项