Select V2 虚拟化选择器

面对大量选项时，基础 Select 渲染所有节点会带来性能压力。Select V2 使用虚拟滚动，仅渲染可视区域，轻松承载上万条数据。

import { createApp } from 'vue'
import { ElSelectV2 } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElSelectV2)

基础用法

传入 options 数组即可使用，与基础 Select 体验一致。

多选

通过 multiple 开启多选模式，选中项以标签形式展示。

隐藏多余标签

通过 collapse-tags 将多余标签折叠为文字；配合 collapse-tags-tooltip 可悬停查看。

可过滤

通过 filterable 启用本地过滤，输入关键字即时检索。

选项分组

当 options 中的项包含 options 字段时，即被视为分组数据。

远程搜索

设置 filterable + remote 并传入 remote-method，即可从远端按需拉取数据。

自定义选项模板

通过默认插槽自定义每一条选项的渲染。

API

Attributes

属性	说明	类型	默认值
model-value / v-model	绑定值	string / number / array 等	—
options	选项数据	array	—
multiple	是否多选	boolean	false
filterable	是否可搜索	boolean	false
remote	是否远程搜索	boolean	false
remote-method	远程搜索方法	Function	—
clearable	是否可清空	boolean	false
collapse-tags	折叠选中标签	boolean	false
collapse-tags-tooltip	折叠时悬停展开	boolean	false
max-collapse-tags	折叠时展示的标签数	number	1
allow-create	允许创建新选项	boolean	false
height	下拉菜单高度	number	274
item-height	每项高度	number	34
value-key	选项对象作为值时的唯一标识	string	value
props	options 字段别名	object	—

Events

事件	说明
change	选中值改变
visible-change	下拉显隐变化
remove-tag	移除已选标签
clear	清空时触发
blur / focus	失焦 / 获焦

完整 API 请参考 Element Plus Select V2。