Select
Basic usage
Disabled option
Set the value of disabled in dd-option to true to disable this option.
Disabled select
Disable the whole component.
Clearable single select
Set clearable attribute for dd-select
Bordered-less
Bordered-less style component.
Suffix
Basic multiple select
Set multiple attribute for dd-select to enable multiple mode. In this case, the value of v-model will be an array of selected options.
Filter Option
You can filter options for your desired ones. Adding 'show-search' to dd-select enables filtering. filter-option is a Function that gets called when the input value changes, and its parameter is the current input value.
Custom template
Insert customized HTML templates into the slot of dd-option.
Remote Search
Enter keywords and search data from server.
Big Data
dd-select use virtual scroll
Select API
Select Attributes
| Name | Description | Type | Default | Version |
|---|---|---|---|---|
| value(v-model) | binding value | string | number | string[] | number[] | — | |
| options | custom render option | { value: any; label?: any; disabled?: boolean; title?: any }[] | — | |
| showSearch | Whether select is searchable | boolean | false | |
| placeholder | placeholder of Input | string | — | |
| disabled | whether Input is disabled | boolean | false | |
| size | size of Select | large | default | small | — | |
| filterOption | Filter based on input items | Function(inputValue, option) | true | |
| multiple | whether multiple-select is activated | boolean | false | |
| clearable | whether select can be cleared | boolean | false | |
| maxTagCount | Max tag count to show | number | — | |
| bordered | Bordered-less | boolean | false | |
| generate | generate component examples immediately | boolean | false |
Select Events
| Name | Description | Type |
|---|---|---|
| change | only if the modelValue has changed | (value, option) => void |
| select | Called when a option is selected | (value, option) => void |
| search | Callback function that is fired when input changed. | (value) => void |
| deselect | Called when a option is deselected，only called for multiple | (value, option) => void |
| remove-tag | Called when a tag is removed ，only called for multiple | (value, option) => void |
| input | Called when input changed | (value) => void |
| clear | Called when the clear icon is clicked in a clearable Select | () => void |
| dropdown-visible-change | Called when the dropdown appears/disappears | (visible) => void |
| blur | Called when input blurs | (e) => void |
| focus | Called when input focuses | (e) => void |
Select Slots
| Name | Description |
|---|---|
| dropdownRender | Customize dropdown content |
| suffixIcon | The custom suffix icon |
Contributors
lazy