vue element plus Virtualized Select 虚拟化选择器

TIP

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

TIP

在 SSR 场景下，您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (例如: VitePress).

背景#

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

基础用法#

适用广泛的基础选择器

Please select

Please select

Please select

多选#

最基础的多选选择器

Please select

隐藏多余标签的多选#

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

use collapse-tags

Please select

use collapse-tags-tooltip

Please select

use max-collapse-tags

Please select

可过滤的多选#

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

Please select

禁用选择器本身或选项#

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

Please select

Please select

给选项进行分组#

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

Please select

自定义选项的渲染模板#

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

Please select

一键清除#

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

Please select

Please select

创建临时选项#

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

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

TIP

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

Please select

Please select

set reserve-keyword false

Please select

远程搜索#

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

从服务器搜索数据，输入关键字进行查找。为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。 remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。

Please enter a keyword

使用 value-key 键属性#

当 options.value 是一个对象时，您应该为它设置一个唯一的标识名称

TIP

在 2.4.0 之前，value-key既用作所选对象的唯一值，也用作options中表示值的对应 key。 现在 value-key 仅作为所选对象的唯一值使用，选项中值的 key 是 props.value.

a0

自定义选项2.4.2#

当您的 options 格式不同于默认格式 您可以通过 props 属性自定义 options

Please select

自定义标签2.5.0#

您可以自定义标签。

将自定义的标签插入 el-select 的 slot 中即可。 collapse-tags, collapse-tags-tooltip, max-collapse-tags 在此模式下不生效.

SelectV2 属性#

props#

SelectV2 事件#

SelectV2 插槽#

Select Exposes#

源代码#

组件 • 文档