Select V2 虚拟列表选择器beta

TIP

这个组件目前在测试当中,如果在使用中发现任何漏洞和问题,请在 GitHub 中提交 issue 以便我们进行处理。

背景

在某些使用情况下,单个选择器可能最终加载数万行数据。 将这么多的数据渲染至 DOM 中可能会给浏览器带来负担,从而造成性能问题。 为了更好的用户和开发者体验,我们决定添加此组件。

基础用法

适用广泛的基础选择器

多选

最基础的多选选择器

隐藏多余标签的多选

默认情况下选中值会以 Tag 的形式展现,你也可以设置collapse-tags属性将它们合并为一段文字。 您可以使用 collapse-tags-tooltip 属性来启用鼠标悬停折叠文字以显示具体所选值的行为。

可过滤的多选

当选项太多时,你可以使用 filterable 选项来启用过滤功能来找到所需的选项。

禁用选择器本身或选项

您可以选择禁用 Select 或者 Select 中的某个选项

给选项进行分组

只要数据格式满足特定要求,我们就可以按照自己的意愿为选项进行分组。

自定义选项的渲染模板

我们也可以通过自定义模板来渲染自己想要的选项内容。

一键清除

我们可以同时清除所有选定的选项。此设定也可适用于单选。

创建临时选项

可以创建并选中未包含在初始选项中的条目。

通过使用 allow-create 属性,用户可以通过输入框创建新项目。 为了使 allow-create 正常工作, filterable 的值必须为 true

TIP

最好在使用 allow-create 属性的同时设置 :reserve-keyword="false"

远程搜索

输入关键字以从远程服务器中查找数据。

使用 value-key

SelectV2 属性

属性名说明类型可选值默认值
model-value / v-model绑定值string / number / boolean / object
multiple是否多选booleanfalse
disabled是否禁用booleanfalse
value-key作为 value 唯一标识的键名,绑定值为对象类型时必填stringvalue
size输入框尺寸stringlarge/default/smalldefault
clearable是否可以清空选项booleanfalse
clear-icon自定义清除图标string | ComponentCircleClose
collapse-tags多选时是否将选中值按文字的形式展示booleanfalse
collapse-tags-tooltip当鼠标悬停于折叠标签的文本时,是否显示所有选中的标签。 只有当 collapse-tags 设置为 true 时才会生效。booleantrue / falsefalse
multiple-limit多选时可被选择的最大数目。 当被设置为0时,可被选择的数目不设限。number0
name选择器的原生name属性string
effect文字提示(Tooltip)的主题,内置darklight两种。stringstringlight
autocomplete自动完成选择输入stringoff
placeholderselect input的原生autocomplete属性stringPlease select
filterable是否可筛选booleanfalse
allow-create是否允许创建新条目, 当使用该属性时,filterable必须设置为truebooleanfalse
reserve-keyword筛选时,是否在选择选项后保留关键字booleantrue
no-data-text当在没有数据时显示的文字,你同时可以使用#empty插槽进行设置。stringNo Data
popper-class选择器下拉菜单的自定义类名string
popper-append-to-body(deprecated)是否将弹出框插入至 body 元素 当弹出框的位置出现问题时,你可以尝试将该属性设置为false。boolean-false
teleported该下拉菜单是否使用teleport插入body元素booleantrue / falsetrue
persistent当下拉选择器未被激活并且persistent设置为false,选择器会被删除。booleantrue / falsetrue
popper-options自定义 popper 选项,更多请参考 popper.jsobject--
automatic-dropdown对于不可过滤的 Select 组件,此属性决定是否在输入框获得焦点后自动弹出选项菜单boolean-false
height下拉菜单的高度,每一个子选项的高度是 34pxnumber-170
scrollbar-always-on控制是否总是展示滚动条boolean-false
remote是否从服务器搜索数据booleanfalse
remote-method当输入值发生变化时被调用的函数。 其参数是当前输入值。 只有当 filterable 设置为 true 时才会生效。function(keyword: string)
validate-event输入时是否触发表单的校验boolean-true
placement下拉框出现的位置stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottom-start

SelectV2 事件

事件名说明回调参数
change选中值发生变化时触发val,目前的选中值
visible-change下拉框出现/隐藏时触发val,出现则为 true,隐藏则为 false
remove-tag多选模式下移除tag时触发val,移除的tag值
clear可清空的单选模式下用户点击清空按钮时触发
blur当选择器的输入框失去焦点时触发(event: FocusEvent)
focus当选择器的输入框获得焦点时触发(event: FocusEvent)

SelectV2 插槽

插槽名说明
default自定义 Option 模板
empty自定义当选项为空时的内容
prefix输入框的前缀

源代码

组件文档

贡献者