* refactor(components): el-alert icon (#3441) * refactor(components): el-alert icon * fix: el-alert test * fix: [el-alert] lint error * feat(utils): add icon util * refactor(components): el-alert icon * refactor(utils): icon * test: update alert test * refactor: remove el-icon in util * refactor(components): el-notification icon (#3512) * chore: temp save changes * refactor: update icon * fix: var * docs: update icon * fix: type class error * style: remove unused class * fix: update icon type * docs: update icon * fix: update iconComponent * refactor(components): el-dialog icon (#3505) * refactor(components): [el-dialog] icon * fix: typo * refactor: dialog icon ref * refactor: dialog icon * style: update close button size * refactor(components): el-message-box icon (#3507) * refactor(components): message-box icon * refactor(components): message icon * fix: test * refactor: update ref * fix: test * docs: update icon * fix: delete unused code * docs: update type * fix: update close button size * fix: type * fix: icon type class * fix: icon type * fix: update type class * refactor(components): el-popconfirm icon (#3513) * refactor(components): el-popconfirm icon * fix: space styles * docs: update example * docs: update example for trigger event * refactor(components): el-page-header icon (#3518) * refactor(components): el-page-header icon * docs: update icon * fix: space errors * refactor(components): el-steps icon (#3520) * refactor(components): el-backtop icon (#3514) * refactor(components): el-backtop icon * fix: update font size * refactor(components): el-button icon (#3536) * refactor(components): el-button icon * fix: update example * refactor(components): el-button icon * refactor: style simplify Co-authored-by: imswk <syfzxx@vip.qq.com> * refactor(components): el-tree icon (#3590) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-avatar icon (#3599) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-carousel icon (#3602) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-progress icon (#3607) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-result icon (#3609) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-timeline icon (#3646) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-table icon (#3611) Co-authored-by: qianjie <qianjie@patsnap.com> * chore: add vue to gitignore * fix: buildProp error * refactor(components): el-pagination icon (#3605) * test: el-menu deprecated icon font (#3794) * test: el-loading deprecated icon font (#3795) * chore: Update changelog 1.1.0-beta.20 (#3838) * fix: about custom extension of table column (#3437) * refactor(components): el-autocomplete icon (#3783) * refactor(components): el-dropdown icon (#3517) * refactor(components): el-dropdown icon * fix: arrow down icon size * style: revert * fix: font-size * refactor(components): el-link icon (#3538) * refactor(components): el-link icon * refactor: update example * fix: import icons * docs: add tip * refactor: update link icon * fix: icon align * fix: typo * refactor(components): el-select icon (#3780) * refactor(components): el-input icon (#3565) * refactor(components): input icon * docs: update example * refactor(components): el-select icon * docs: icon usage * fix: input style * fix: add scoped * docs: fix icon * fix: icon align * fix: icon align * fix: typo * fix: typo * refactor(components): el-input-number icon (#3566) * refactor(components): el-input-number icon * fix: icon align * refactor(components): el-tag icon (#3793) * refactor(components): el-tag icon * fix: icon align * fix: icon margin * refactor(components): el-switch icon (#3787) * refactor(components): el-switch icon * fix: icon align * docs: add icon usage * refactor(components): el-collapse icon (#3788) * refactor(components): el-collapse icon * docs: update icon demo * fix: typo * refactor(components): el-uplod icon (#3598) * refactor(components): el-uplod icon * docs: update icon useage * docs: fix icon * docs: fix icon * docs: update upload-filled icon * fix: icon align * fix: item icon align * refactor(components): el-select-v2 icon (#3781) * refactor(components): el-select-v2 icon * revert: play/main.ts * fix: icon style * fix: icon solt * refactor(components): el-cascader icon (#3785) * refactor(components): input icon * docs: update example * refactor(components): el-select icon * refactor(components): el-cascader icon * refactor(components): el-tag icon * fix: icon align * fix: icon margin * docs: icon usage * fix: input style * fix: add scoped * test: remove unuesd code * fix: cascader-panel * fix: icon style * fix: icon animation * refactor(components): el-drawer icon (#3796) * refactor(components): el-drawer icon * fix: close icon size * fix: close icon align * refactor(components): el-transfer icon (#3792) * refactor(components): el-transfer icon * fix: icon align * refactor(components): el-image-viewer icon (#3797) * refactor(components): el-image-view icon * fix: icon size * docs: update domo * style: format vue * fix: fullscreen icon * Add cursor for icons Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> * refactor(components): rate-icon (#3891) * refactor(components): el-rate icon * docs: update example * docs: update * test: update * docs: update * fix: variable rename * fix: demo update * fix: allow half bug * refactor(components): el-time-picker icon (#3834) * refactor(components): el-button icon * refactor(components): date-picker icon * refactor(components): input icon * docs: update example * refactor(components): el-select icon * refactor(components): el-time-select icon * fix: icon width * docs: icon usage * fix: input style * fix: add scoped * fix: icon size * docs: icon display * fix: icon in button * docs: fix error * refactor(components): el-time-picker icon * fix: var * fix: icon align * test: delete unused code * test: fix error * fix: remove unused code * docs: fix typo * docs: update icon * fix: default prefix icon * fix: range picker icon align * Update cursor for picker Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> * fix(components): el-input close icon * chore: delete fonts * fix: copy full style Co-authored-by: imswk <syfzxx@vip.qq.com> Co-authored-by: bastarder <85257684@qq.com> Co-authored-by: qianjie <qianjie@patsnap.com> Co-authored-by: Element <wallement@gmail.com> Co-authored-by: Alan Wang <948467222@qq.com> Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
9.4 KiB
title | lang |
---|---|
Virtualized Select | en-US |
Select V2 virtualized selector
:::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
:::demo
select-v2/basic-usage
:::
Multi select
The basic multi-select selector with tags
:::demo
select-v2/multiple
:::
Hide extra tags when the selected items are too many.
:::demo
select-v2/hide-extra-tags
:::
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
:::demo
select-v2/filterable
:::
Disabled selector and select options
You can choose to disable selector itself or the option.
:::demo
select-v2/disabled
:::
Option Grouping
We can group option as we wanted, as long as the data satisfies the pattern.
:::demo
select-v2/grouping
:::
Customized option renderer
We can define our own template for rendering the option in the popup.
:::demo
select-v2/customized-option
:::
Clearable selector
We can clear all the selected options at once, also applicable for single select.
:::demo
select-v2/clearable
:::
Create Option
Create and select new items that are not included in select options
:::demo 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
.
select-v2/allow-create
:::
Remote search
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
:::
SelectV2 Attributes
Param | Description | Type | Accepted Values | Default |
---|---|---|---|---|
model-value / v-model | biding value | string / number / boolean / 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 | input box size | string | medium/small/mini | — |
clearable | whether select can be cleared | boolean | — | false |
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 |
name | the name attribute of select input | string | — | — |
autocomplete | select input 的 autocomplete 属性 | string | — | off |
placeholder | the autocomplete attribute of select input | string | — | Please select |
filterable | is filterable | boolean | — | false |
allow-create | whether creating new items is allowed. To use this, filterable must be true |
boolean | — | false |
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 | string | — | — |
popper-append-to-body | 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 |
popper-options | Customized popper option see more at popper.js | object | - | - |
automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |
clear-icon | Customized clear icon component | string / Component | — | CircleClose |
height | The height of the dropdown panel, 34px for each item | number | - | 170 |
SelectV2 Events
Event Name | Description | Params |
---|---|---|
change | triggers when the selected value changes | current selected value |
visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
remove-tag | triggers when a tag is removed in multiple mode | removed tag value |
clear | triggers when the clear icon is clicked in a clearable Select | — |
blur | triggers when Input blurs | (event: Event) |
focus | triggers when Input focuses | (event: Event) |
SelectV2 Slots
name | 说明 |
---|---|
default | Option renderer |
empty | 无 Option 时的列表 |