Appearance
Select 选择器
当选项过多时,使用下拉菜单展示并选择内容。
基础用法
适用广泛的基础单选
有禁用选项
在选项中,设定 disabled 值为 true,即可禁用该选项
禁用状态
选择器不可用状态
可清空
包含清空按钮,可将选择器清空为初始状态
可搜索
可以利用搜索功能快速查找选项
多选
支持多选,v-model 绑定数组。
基础多选(标签)
多选选择器默认会在输入框中使用标签展示已选项。
折叠标签
通过 collapse-tags 折叠展示标签,仅显示前若干个,剩余以 + N 显示。
折叠标签 Tooltip
可通过 collapse-tags-tooltip 在 + N 上显示被折叠项的标签文案(采用原生 title 简化表现)。
指定最多展示的标签数量
使用 max-collapse-tags 控制折叠模式下可见的标签数量。
不同尺寸
Select 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。
大数据与虚拟滚动
当选项数量较大(如 1000+)时,建议开启虚拟滚动,仅渲染可视区域内的选项,显著提升打开与滚动性能。
- 开启方式:设置
virtual为true。 - 可选配置:
item-height(默认 34,与样式一致,可不传;如自定义选项高度需同步传入)、keeps(视窗保留项数)、buffer(前后缓冲项数)。 - 建议同时开启
filterable,结合内置防抖过滤,搜索体验更佳。
Select Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| model-value / v-model | 绑定值 | string / number / array | — | — |
| multiple | 是否多选 | boolean | — | false |
| collapse-tags | 折叠多选标签,显示 + N | boolean | — | false |
| collapse-tags-tooltip | 折叠标签显示 tooltip(使用 title) | boolean | — | false |
| max-collapse-tags | 折叠模式下最多显示的标签数量 | number | — | 1 |
| options | 选项数据 | SelectOption[] | — | [] |
| placeholder | 占位符 | string | — | 请选择 |
| disabled | 是否禁用 | boolean | — | false |
| clearable | 是否可以清空选项 | boolean | — | false |
| filterable | 是否可搜索 | boolean | — | false |
| size | 输入框尺寸 | string | large / default / small | default |
| no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
| virtual | 是否启用虚拟滚动 | boolean | — | false |
| item-height | 选项高度(用于虚拟滚动估算;默认与样式一致为 34,可不传) | number | — | 34 |
| keeps | 视窗保留项数(虚拟滚动) | number | — | 12 |
| buffer | 前后缓冲项数(虚拟滚动) | number | — | 3 |
SelectOption
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 选项的标签 | string | — | — |
| value | 选项的值 | string / number | — | — |
| disabled | 是否禁用该选项 | boolean | — | false |
Select Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 选中值发生变化时触发 | 目前的选中值 |
| clear | 用户点击清空按钮时触发 | — |
| focus | 当 input 获得焦点时触发 | (event: Event) |
| blur | 当 input 失去焦点时触发 | (event: Event) |
Select Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| focus | 使 input 获取焦点 | — |
| blur | 使 input 失去焦点 | — |
键盘操作
| 按键 | 说明 |
|---|---|
| Enter | 选择当前高亮的选项 |
| Escape | 关闭下拉菜单 |
| ArrowUp | 向上移动高亮选项 |
| ArrowDown | 向下移动高亮选项 |