## Select V2 virtualized selector :::tip This component is still under testing, if you found any bug or issue please report it at [Github](https://github.com/element-plus/element-plus/issues) 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 ```html ``` ::: ### Multi select The basic multi-select selector with tags :::demo ```html ``` ::: ### Hide extra tags when the selected items are too many. :::demo ```html ``` ::: ### 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 ```html ``` ::: ### Disabled selector and select options You can choose to disable selector itself or the option. :::demo ```html ``` ::: ### Option Grouping We can group option as we wanted, as long as the data satisfies the pattern. :::demo ```html ``` ::: ### Customized option renderer We can define our own template for rendering the option in the popup. :::demo ```html ``` ::: ### Clearable selector We can clear all the selected options at once, also applicable for single select. :::demo ```html ``` ::: ### Créer des options Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluses dans le menu. :::demo En utilisant `allow-create`, peuvent créer de nouveaux choix en les entrant dans le champ d'input. Cette option ne marche que si `filterable` est activé. ```html ``` ::: ### Recherche à distance Vous pouvez aller chercher les options sur le serveur de manière dynamique. :::demo Ajoutez `filterable` et `remote` pour activer la recherche distante, ainsi que `remote-method`. Cette dernière est une `Function` qui est appelée lorsque la valeur change, avec pour paramètre la valeur courante. ```html ``` ::: ### Keyboard navigation WIP 👷‍♀️ :::tip Some APIs are still undergoing (comparing to the non-virtualized select), because there were lots of legacy API refactors and new designs, the current version only implements the simplest and most used functionalities. ::: ### 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 | | filter-method | Méthode de filtrage personnalisée. | function | — | — | | remote | Si les options sont chargées dynamiquement depuis le serveur. | boolean | — | false | | remote-method | Méthode pour la recherche distante. | function | — | — | | allow-create | Si l'utilisateur peut créer des options. Dans ce cas `filterable` doit être activé. | 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](https://popper.js.org/documentation.html) | 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 class | string | — | el-icon-circle-close | | 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时的列表 |