Virtualized Select

TIP

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

TIP

This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

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.

Clearable selector

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

Customized option renderer

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

Header of the dropdown 2.5.2

You can customize the header of the dropdown.

You can customize the footer of the dropdown.

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.

TIP

It will be better to set :reserve-keyword="false" when use allow-create

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

TIP

Before 2.4.0, value-key was used both as the unique value of the selected object and as an alias for the value in options. Now value-key is only used as the unique value of the selected object, and the alias for the value in options is props.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

Custom Tag 2.5.0

You can customize tags.

Custom Loading 2.5.2

Override loading content.

API

Attributes

NameDescriptionTypeDefault
model-value / v-modelbinding valuestring / number / boolean / object / array
optionsdata of the options, the key of value and label can be customize by propsarray
props 2.4.2configuration options, see the following tableobject
multipleis multiplebooleanfalse
disabledis disabledbooleanfalse
value-keyunique identity key name for value, required when value is an objectstringvalue
sizesize of componentenum''
clearablewhether select can be clearedbooleanfalse
clear-iconcustom clear iconstring / objectCircleClose
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
effecttooltip theme, built-in theme: dark / lightenum / stringlight
autocompleteautocomplete of select inputstringoff
placeholderplaceholderstringPlease select
filterableis filterablebooleanfalse
allow-createwhether creating new items is allowed. To use this, filterable must be truebooleanfalse
filter-methodcustom filter methodFunction
loadingwhether Select is loading data from serverbooleanfalse
loading-textdisplayed text while loading data from server, default is 'Loading'string
reserve-keywordwhether reserve the keyword after select filtered option.booleantrue
no-match-textdisplayed text when no data matches the filtering query, you can also use slot empty, default is 'No matching data'string
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-body deprecatedwhether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to falsebooleanfalse
teleportedwhether select dropdown is teleported to the bodybooleantrue
persistentwhen select dropdown is inactive and persistent is false, select dropdown will be destroyedbooleantrue
popper-optionspopper.js parametersobjectrefer to popper.js doc{}
automatic-dropdownfor non-filterable Select, this prop decides if the option menu pops up when the input is focusedbooleanfalse
heightThe height of the dropdown panel, 34px for each itemnumber274
item-heightThe height of the dropdown itemnumber34
scrollbar-always-onControls whether the scrollbar is always displayedbooleanfalse
remotewhether search data from serverbooleanfalse
remote-methodfunction that gets called when the input value changes. Its parameter is the current input value. To use this, filterable must be trueFunction
validate-eventwhether to trigger form validationbooleantrue
placementposition of dropdownenumbottom-start
fallback-placements 2.5.6list of possible positions for dropdown popper.jsarray['bottom-start', 'top-start', 'right', 'left']
collapse-tags-tooltip 2.3.0whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be truebooleanfalse
max-collapse-tags 2.3.0The max tags number to be shown. To use this, collapse-tags must be truenumber1
tag-type 2.5.0tag typeenuminfo
aria-label a11y 2.5.0same as aria-label in native inputstring

props

AttributeDescriptionTypeDefault
valuespecify which key of node object is used as the node's valuestringvalue
labelspecify which key of node object is used as the node's labelstringlabel
optionsspecify which key of node object is used as the node's childrenstringoptions
disabledspecify which key of node object is used as the node's disabledstringdisabled

Events

NameDescriptionType
changetriggers when the selected value changes, the param is current selected valueFunction
visible-changetriggers when the dropdown appears/disappears, the param will be true when it appears, and false otherwiseFunction
remove-tagtriggers when a tag is removed in multiple mode, the param is removed tag valueFunction
cleartriggers when the clear icon is clicked in a clearable SelectFunction
blurtriggers when Input blursFunction
focustriggers when Input focusesFunction

Slots

NameDescription
defaultOption renderer
header 2.5.2content at the top of the dropdown
footer 2.5.2content at the bottom of the dropdown
emptycontent when options is empty
prefixprefix content of input
tag 2.5.0content as Select tag
loading 2.5.2content as Select loading

Exposes

MethodDescriptionType
focusfocus the Input componentFunction
blurblur the Input component, and hide the dropdownFunction

Source

ComponentDocs

Contributors