docs/en-US/component/select-v2.md
:::tip
This component is still under testing, if you found any bug or issue please report it at GitHub for us to fix.
:::
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.
The simplest selector
:::demo
select-v2/basic-usage
:::
The basic multi-select selector with tags
:::demo
select-v2/multiple
:::
:::demo Add size attribute to change the size of Select-V2. In addition to the default size, there are two other options: large, small.
select-v2/size
:::
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.
:::demo
select-v2/hide-extra-tags
:::
When the options are overwhelmingly too many, you can use filterable option to enable filter feature for finding out the desired option
:::demo
select-v2/filterable
:::
You can choose to disable selector itself or the option.
:::demo
select-v2/disabled
:::
We can group option as we wanted, as long as the data satisfies the pattern.
:::demo
select-v2/grouping
:::
We can clear all the selected options at once, also applicable for single select.
:::demo
select-v2/clearable
:::
We can define our own template for rendering the option in the popup.
:::demo
select-v2/customized-option
:::
You can customize the header of the dropdown.
:::demo Use slot to customize the content.
select-v2/custom-header
:::
You can customize the footer of the dropdown.
:::demo Use slot to customize the content.
select-v2/custom-footer
:::
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. This example also demonstrates default-first-option. When this attribute is set to true, you can select the first option in the current option list by hitting enter without having to navigate with mouse or arrow keys.
:::tip
It will be better to set :reserve-keyword="false" when use allow-create
:::
:::demo
select-v2/allow-create
:::
Enter keywords and search data from server.
:::demo Set the value of filterable and remote with true to enable remote search, and you should pass the remote-method. remote-method is a Function that gets called when the input value changes, and its parameter is the current input value.
select-v2/remote-search
:::
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.
:::
:::demo
select-v2/use-valueKey
:::
When your options format is different from the default format, you can customize the alias of the options through the props attribute
:::demo
select-v2/props
:::
You can customize tags.
:::demo Insert customized tags into the slot of el-select. collapse-tags, collapse-tags-tooltip, max-collapse-tags will not work.
select-v2/custom-tag
:::
Override loading content.
:::demo
select-v2/custom-loading
:::
If you want to support empty string, please set empty-values to [null, undefined].
If you want to change the clear value to null, please set value-on-clear to null.
:::demo
select-v2/empty-values
:::
You can customize label.
:::demo
select-v2/custom-label
:::
The width of dropdown box is calculated by default based on the value of label. If you customize the dropdown box options through the default slot, it is likely that the text displayed in the options is not equal to the value of label, resulting in calculation errors. In this case, you can set the fit-input-width attribute to a number to fix its width.
:::demo
select-v2/custom-width
:::
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] / ^[object] / ^[array] | — |
| options | data of the options, the key of value and label can be customize by props | ^[array] | — |
| props ^(2.4.2) | configuration options, see the following table | ^[object] | — |
| multiple | is multiple | ^[boolean] | false |
| disabled | is disabled | ^[boolean] | false |
| value-key | unique identity key name for value, required when value is an object | ^[string] | value |
| size | size of component | ^[enum]'' | 'large' | 'default' | 'small' | '' |
| clearable | whether select can be cleared | ^[boolean] | false |
| clear-icon | custom clear icon | ^[string] / ^[object]Component | CircleClose |
| collapse-tags | whether to collapse tags to a text when multiple selecting | ^[boolean] | false |
| multiple-limit | maximum number of options user can select when multiple is true. No limit when set to 0 | ^[number] | 0 |
| id | native input id input | ^[string] | — |
| name | the name attribute of select input | ^[string] | — |
| effect | tooltip theme, built-in theme: dark / light | ^[enum]'dark' | 'light' / ^[string] | light |
| autocomplete | autocomplete of select input | ^[string] | off |
| placeholder | placeholder | ^[string] | Please select |
| filterable | whether Select is filterable | ^[boolean] | false |
| allow-create | whether creating new items is allowed. To use this, filterable must be true | ^[boolean] | false |
| filter-method | custom filter method, the first parameter is the current input value. To use this, filterable must be true method | ^[Function](query: string) => void | — |
| loading | whether Select is loading data from server | ^[boolean] | false |
| loading-text | displayed text while loading data from server, default is 'Loading' | ^[string] | — |
| reserve-keyword | whether reserve the keyword after select filtered option. | ^[boolean] | true |
| default-first-option | select first matching option on enter key. Use with filterable or remote | ^[boolean] | false |
| no-match-text | displayed text when no data matches the filtering query, you can also use slot empty, default is 'No matching data' | ^[string] | — |
| no-data-text | displayed text when there is no options, you can also use slot empty | ^[string] | No Data |
| popper-class | custom class name for Select's dropdown and tags' tooltip | ^[string] / ^[object] | '' |
| popper-style ^(2.11.0) | custom style for Select's dropdown and tags' tooltip | ^[string] / ^[object] | — |
| teleported | whether select dropdown is teleported, if true it will be teleported to where append-to sets | ^[boolean] | true |
| append-to ^(2.8.8) | which element the select dropdown appends to | ^[CSSSelector] / ^[HTMLElement] | — |
| persistent | when select dropdown is inactive and persistent is false, select dropdown will be destroyed | ^[boolean] | true |
| popper-options | popper.js parameters | ^[object]refer to popper.js doc | {} |
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | ^[boolean] | false |
| fit-input-width ^(2.9.2) | whether the width of the dropdown is the same as the input, if the value is number, then the width is fixed | ^[boolean] / ^[number] | true |
| suffix-icon ^(2.9.8) | custom suffix icon component | ^[string] / ^[object]Component | ArrowDown |
| height | The height of the dropdown panel, 34px for each item | ^[number] | 274 |
| item-height | The height of the dropdown item | ^[number] | 34 |
| estimated-option-height | Controls virtual-list sizing mode: if undefined, the list uses fixed item height from item-height; if provided, the list uses dynamic item sizing and this value as the estimated item height. | ^[number] | — |
| scrollbar-always-on | Controls whether the scrollbar is always displayed | ^[boolean] | false |
| remote | whether search data from server | ^[boolean] | false |
| debounce ^(2.11.7) | debounce delay during remote search, in milliseconds | ^[number] | 300 |
| remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, filterable must be true | ^[Function](query: string) => void | — |
| remote-show-suffix ^(2.11.9) | in remote search method show suffix icon | ^[boolean] | false |
| validate-event | whether to trigger form validation | ^[boolean] | true |
| offset ^(2.8.8) | offset of the dropdown | ^[number] | 12 |
| show-arrow ^(2.8.8) | whether the dropdown has an arrow | ^[boolean] | true |
| placement | position of dropdown | ^[enum]'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | bottom-start |
| fallback-placements ^(2.5.6) | list of possible positions for dropdown popper.js | ^[array]Placement[] | ['bottom-start', 'top-start', 'right', 'left'] |
| collapse-tags-tooltip ^(2.3.0) | whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be true | ^[boolean] | false |
| tag-tooltip ^(2.13.3) | configuration object for the collapse-tags tooltip. To use this, collapse-tags and collapse-tags-tooltip must be true | ^[object]TagTooltipProps | {} |
| max-collapse-tags ^(2.3.0) | The max tags number to be shown. To use this, collapse-tags must be true | ^[number] | 1 |
| tag-type ^(2.5.0) | tag type | ^[enum]'' | 'success' | 'info' | 'warning' | 'danger' | info |
| tag-effect ^(2.7.7) | tag effect | ^[enum]'' | 'light' | 'dark' | 'plain' | light |
| aria-label ^(a11y) ^(2.5.0) | same as aria-label in native input | ^[string] | — |
| empty-values ^(2.7.0) | empty values of component, see config-provider | ^[array] | — |
| value-on-clear ^(2.7.0) | clear return value, see config-provider | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
| popper-append-to-body ^(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | ^[boolean] | false |
| tabindex ^(2.9.0) | tabindex for input | ^[string] / ^[number] | — |
| Attribute | Description | Type | Default |
|---|---|---|---|
| value | specify which key of node object is used as the node's value | ^[string] | value |
| label | specify which key of node object is used as the node's label | ^[string] | label |
| options | specify which key of node object is used as the node's children | ^[string] | options |
| disabled | specify which key of node object is used as the node's disabled | ^[string] | disabled |
:::tip Fallback Mechanism
Properties in tag-tooltip follow this priority order:
:::
:::tip Custom Container Positioning
When appending the Tooltip to a custom container (via the append-to attribute), the container should be configured with position: relative or position: absolute to ensure accurate positioning. Additionally, you can apply overflow: hidden to the container if you need to prevent the Tooltip from overflowing its boundaries.
:::
| Attribute | Description | Type | Default |
|---|---|---|---|
| append-to | which element the tooltip CONTENT appends to | ^[CSSSelector] / ^[HTMLElement] | — |
| placement | position of Tooltip | ^[enum]'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | bottom |
| fallback-placements | list of possible positions for Tooltip popper.js | ^[array]Placement[] | ['bottom', 'top', 'right', 'left'] |
| effect | Tooltip theme, built-in theme: dark / light | ^[enum]'dark' | 'light' / ^[string] | — |
| popper-class | custom class name for Tooltip's popper | ^[string] | — |
| popper-style | custom style for Tooltip's popper | ^[string] / ^[object] | — |
| transition | animation name | ^[string] | — |
| teleported | whether tooltip content is teleported, if true it will be teleported to where append-to sets | ^[boolean] | — |
| popper-options | popper.js parameters | ^[object]refer to popper.js doc | — |
| show-after | delay of appearance, in millisecond | ^[number] | — |
| hide-after | delay of disappear, in millisecond | ^[number] | — |
| auto-close | timeout in milliseconds to hide tooltip | ^[number] | — |
| offset | offset of the Tooltip | ^[number] | — |
| Name | Description | Type |
|---|---|---|
| change | triggers when the selected value changes, the param is current selected value | ^[Function](val: any) => void |
| visible-change | triggers when the dropdown appears/disappears, the param will be true when it appears, and false otherwise | ^[Function](visible: boolean) => void |
| remove-tag | triggers when a tag is removed in multiple mode, the param is removed tag value | ^[Function](tagValue: any) => void |
| clear | triggers when the clear icon is clicked in a clearable Select | ^[Function]() => void |
| blur | triggers when Input blurs | ^[Function](event: FocusEvent) => void |
| focus | triggers when Input focuses | ^[Function](event: FocusEvent) => void |
| Name | Description | Type |
|---|---|---|
| default | Option renderer | — |
| header ^(2.5.2) | content at the top of the dropdown | — |
| footer ^(2.5.2) | content at the bottom of the dropdown | — |
| empty | content when options is empty | — |
| prefix | prefix content of input | — |
| tag ^(2.5.0) | content as Select tag, subTags data, selectDisabled and deleteTag introduced in ^(2.10.3) | ^[object]{ data: Option[], selectDisabled: boolean, deleteTag: (event: MouseEvent, option: Option) => void } |
| loading ^(2.5.2) | content as Select loading | — |
| label ^(2.7.4) | content as Select label. index introduced in ^(2.11.2) | ^[object]{ index: number, label: string | any, value: string | any } |
| Name | Description | Type |
|---|---|---|
| focus | focus the Input component | ^[Function]() => void |
| blur | blur the Input component, and hide the dropdown | ^[Function]() => void |
| selectedLabel ^(2.8.5) | get the currently selected label | ^[object]ComputedRef<string | string[]> |