虚拟化选择器 ​

背景 ​

在某些场景下，一个选择器可能需要加载成千上万条数据。在 DOM 中渲染如此多的数据可能会给浏览器带来负担，从而导致性能问题。为了更好的用户和开发者体验，我们决定添加这个组件。

基础用法 ​

最简单的选择器

多选 ​

带标签的基础多选选择器

尺寸 ​

当选中项过多时隐藏多余标签 ​

您可以使用 collapse-tags 属性将标签折叠为一段文字。您可以使用 collapse-tags-tooltip 属性，在鼠标悬停于折叠文字上时查看它们。

可筛选的多选 ​

当选项数量非常多时，您可以使用 filterable 选项来启用筛选功能，以便找出所需的选项。

禁用选择器和选择项 ​

您可以选择禁用选择器本身或某个选项。

选项分组 ​

只要数据满足特定模式，我们就可以按需对选项进行分组。

可清空的选择器 ​

我们可以一次性清空所有已选中的选项，也适用于单选。

自定义选项渲染器 ​

我们可以定义自己的模板来渲染弹出框中的选项。

下拉框的页眉 2.5.2 ​

您可以自定义下拉列表的页眉。

下拉框的页脚 2.5.2 ​

您可以自定义下拉列表的页脚。

创建选项 ​

创建并选择选择器选项中不包含的新项目

通过使用 allow-create 属性，用户可以通过在输入框中输入来创建新项目。请注意，要使 allow-create 生效，filterable 必须为 true。此示例还演示了 default-first-option。当此属性设置为 true 时，您可以通过按回车键选择当前选项列表中的第一个选项，而无需使用鼠标或箭头键导航。

远程搜索 ​

输入关键字，并从服务器获取数据。

使用 value-key 属性 ​

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

自定义选项的别名 2.4.2 ​

当您的 options 格式与默认格式不同时，您可以通过 props 属性自定义 options 的别名。

自定义标签 2.5.0 ​

您可以自定义标签。

自定义加载 2.5.2 ​

覆盖加载内容。

空值 2.7.0 ​

如果您想支持空字符串，请将 empty-values 设置为 [null, undefined]。

如果要将清除值更改为 null，请将 value-on-clear 设置为 null。

自定义标签 2.7.4 ​

您可以自定义标签。

自定义宽度 2.9.2 ​

下拉框的宽度默认是根据 label 的值计算的。如果您通过 default slot 自定义下拉框选项，很可能选项中显示的文本不等于 label 的值，导致计算错误。在这种情况下，您可以将 fit-input-width 属性设置为一个数字来固定其宽度。

API ​

属性 ​

props ​

事件 ​

插槽 ​

暴露 ​

来源 ​

组件 • 样式 • 文档

贡献者 ​