Skip to content

Select

A custom wrapper for theelement-plus selectcomponent, simplifying traversal operations.

Basic Usage

Option Groups

Disabled State

Properties

PropertyDescriptionTypeExtensibleDefault Value
v-modelBound value of the selected itemenumNo-
optionsList of optionsSelectOption[]Yes-
clearableWhether the option can be clearedbooleanNofalse
multipleWhether multiple selection is allowedbooleanNofalse
disabledWhether the select is disabledbooleanNofalse
value-keyKey name used as the unique identifier for the value. Required when the bound value is an objectstringNovalue
sizeSize of the input boxenumNo
collapse-tagsWhether to display selected values as text in multiple selection modebooleanNofalse
collapse-tags-tooltipWhether to show all selected tags when hovering over the collapsed tag. Requires collapse-tags to be truebooleanNofalse
multiple-limitIn multiple selection mode, the maximum number of items that can be selected. 0 means unlimitednumberNo0
nameNative name attributestringNo
effectTooltip themeenumNolight
autocompleteNative autocomplete attributestringNooff
placeholderPlaceholder textstringNo
filterableWhether the options can be filteredbooleanNofalse
allow-createWhether to allow users to create new items. Only effective when filterable is true.booleanNofalse
filter-methodCustom filtering methodFunctionNo
remoteWhether the options are loaded from a remote serverbooleanNofalse
remote-methodCustom remote search methodFunctionNo
remote-show-suffixDisplay suffix icon for remote search methodbooleanNofalse
loadingWhether data is being fetched from a remote sourcebooleanNofalse
loading-textText to display when loading data from the serverstringNo-
no-match-textText to display when no matches are foundstringNo-
no-data-textText to display when no options are availablestringNo-
popper-classCustom class name for the dropdown menustringNo''
reserve-keywordWhether to retain the current search keyword after selecting an option when multiple and filterable are truebooleanNotrue
default-first-optionWhether to select the first matching item when pressing Enter in the input box. Requires filterable or remotebooleanNofalse
teleportedWhether to append the dropdown list to the body elementbooleanNotrue
persistentWhether the dropdown selector will be removed when it is not activated and persistent is falsebooleanNotrue
automatic-dropdownWhether to automatically open the options menu when the input box gains focus for non-searchable SelectbooleanNofalse
clear-iconCustom clear iconenumNoCircleClose
fit-input-widthWhether the width of the dropdown matches the input box widthbooleanNofalse
suffix-iconCustom suffix icon componentenumNoArrowDown
suffix-transition deprecatedAnimation for suffix icon when the dropdown menu shows or hidesbooleanNotrue
tag-typeTag typeenumNoinfo
tag-effect el^2.7.7ag effectenumNolight
validate-eventWhether to trigger form validationbooleanNotrue
placementPosition of the dropdown menuenumNobottom-start
max-collapse-tagsMaximum number of tags to display when collapse-tags is truenumberNo1
popper-optionspopper.js optionsobjectNo-
aria-labelEquivalent to the native input aria-label attributestringNo-
empty-values el^2.7.0Configuration for empty values in the component. See config-providerarrayNo-
value-on-clear el^2.7.0Value for clearing options. See config-providerenumNo-

SelectOption

PropertyDescriptionTypeRequiredDefault Value
labelOption nameenum-
valueOption valueenum-
disabledWhether disabledbooleanNofalse
optionsOption group listSelectOption[]No-

Events

事件名说明类型是否拓展
changeTriggered when the selected value changesFunctionNo
visible-changeTriggered when the dropdown appears/hidesFunctionNo
remove-tagTriggered when removing a tag in multiple selection modeFunctionNo
clearTriggered when the clear button is clicked in single-select modeFunctionNo
blurTriggered when the input loses focusFunctionNo
focusTriggered when the input gains focusFunctionNo

Released under the MIT License