Select V2 virtualized selector beta #

Background #

In some use-cases, a single selector may end up loading tens of thousands of rows of data. Rendering that much data into the DOM could be a burden to the browser, which can result in performance issues. For a better user and developer experience, we decided to add this component.

Basic usage #

The simplest selector

Multi select #

The basic multi-select selector with tags

Hide extra tags when the selected items are too many. #

You can collapse tags to a text by using collapse-tags attribute. You can check them when mouse hover collapse text by using collapse-tags-tooltip attribute.

Filterable multi-select #

When the options are overwhelmingly too many, you can use filterable option to enable filter feature for finding out the desired option

Disabled selector and select options #

You can choose to disable selector itself or the option.

Option Grouping #

We can group option as we wanted, as long as the data satisfies the pattern.

Customized option renderer #

We can define our own template for rendering the option in the popup.

Clearable selector #

We can clear all the selected options at once, also applicable for single select.

Create Option #

Create and select new items that are not included in select options

By using the allow-create attribute, users can create new items by typing in the input box. Note that for allow-create to work, filterable must be true.

Remote search #

Enter keywords and search data from server.

Use value-key attribute #

when options.value is an object, you should set a unique identity key name for value

Aliases for custom options 2.4.2 #

When your options format is different from the default format, you can customize the alias of the options through the props attribute

SelectV2 Attributes #

props #

SelectV2 Events #

SelectV2 Slots #