Select V2 virtualized selectorbeta

TIP

This component is still under testing, if you found any bug or issue please report it at Github for us to fix.

Background

Now days, with tons of data came from the backend server through the internet, one single selector could have ended up loading tens of thousands of data from the backend, but rendering that much data into the DOM could be a burden to the browser which could crash the browser. For better user experience 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.

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

Enter keywords and search data from server.

SelectV2 Attributes

ParamDescriptionTypeAccepted ValuesDefault
model-value / v-modelbiding valuestring / number / boolean / object
multipleis multiplebooleanfalse
disabledis disabledbooleanfalse
value-keyunique identity key name for value, required when value is an objectstringvalue
sizeinput box sizestringmedium/small/mini
clearablewhether select can be clearedbooleanfalse
collapse-tagswhether to collapse tags to a text when multiple selectingbooleanfalse
multiple-limitmaximum number of options user can select when multiple is true. No limit when set to 0number0
namethe name attribute of select inputstring
autocompleteselect input 的 autocomplete 属性stringoff
placeholderthe autocomplete attribute of select inputstringPlease select
filterableis filterablebooleanfalse
allow-createwhether creating new items is allowed. To use this, filterable must be truebooleanfalse
no-data-textdisplayed text when there is no options, you can also use slot emptystringNo Data
popper-classcustom class name for Select's dropdownstring
popper-append-to-bodywhether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to falseboolean-false
popper-optionsCustomized popper option see more at popper.jsobject--
automatic-dropdownfor non-filterable Select, this prop decides if the option menu pops up when the input is focusedboolean-false
clear-iconCustomized clear icon classstringel-icon-circle-close
heightThe height of the dropdown panel, 34px for each itemnumber-170

SelectV2 Events

Event NameDescriptionParams
changetriggers when the selected value changescurrent selected value
visible-changetriggers when the dropdown appears/disappearstrue when it appears, and false otherwise
remove-tagtriggers when a tag is removed in multiple moderemoved tag value
cleartriggers when the clear icon is clicked in a clearable Select
blurtriggers when Input blurs(event: Event)
focustriggers when Input focuses(event: Event)

SelectV2 Slots

name说明
defaultOption renderer
empty无 Option 时的列表