Select V2 虚拟列表选择器beta
TIP
这个组件目前在测试当中，如果在使用中发现任何漏洞和问题，请在 Github中提交 issue 以便我们进行处理。
背景
在某些使用情况下，单个选择器可能最终加载数万行数据。 将这么多的数据渲染至 DOM 中可能会给浏览器带来负担，从而造成性能问题。 为了更好的用户和开发者体验，我们决定添加此组件。
基础用法
适用广泛的基础选择器
多选
最基础的多选选择器
隐藏多余标签的多选
默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。 您可以使用 collapse-tags-tooltip 属性来启用鼠标悬停折叠文字以显示具体所选值的行为。
可过滤的多选
当选项太多时，你可以使用 filterable 选项来启用过滤功能来找到所需的选项。
禁用选择器本身或选项
您可以选择禁用 Select 或者 Select 中的某个选项
给选项进行分组
只要数据格式满足特定要求，我们就可以按照自己的意愿为选项进行分组。
自定义选项的渲染模板
我们也可以通过自定义模板来渲染自己想要的选项内容。
一键清除
我们可以同时清除所有选定的选项。此设定也可适用于单选。
创建临时选项
可以创建并选中未包含在初始选项中的条目。
通过使用 allow-create 属性，用户可以通过输入框创建新项目。 为了使 allow-create 正常工作， filterable 的值必须为 true。
TIP
最好在使用 allow-create 属性的同时设置 :reserve-keyword="false"。
远程搜索
输入关键字以从远程服务器中查找数据。
SelectV2 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| model-value / v-model | 绑定值 | string / number / boolean / object | — | — |
| multiple | 是否多选 | boolean | — | false |
| disabled | 是否禁用 | boolean | — | false |
| value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
| size | 输入框尺寸 | string | large/default/small | default |
| clearable | 是否可以清空选项 | boolean | — | false |
| clear-icon | 自定义清除图标 | string / component | — | CircleClose |
| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
| collapse-tags-tooltip | 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 只有当 collapse-tags 设置为 true 时才会生效。 | boolean | true / false | 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 | — | — |
| effect | Tooltip theme, built-in theme: dark / light | string | string | light |
| autocomplete | autocomplete of select input | 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 |
| reserve-keyword | whether reserve the keyword after select filtered option. | boolean | — | true |
| 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(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 |
| teleported | whether select dropdown is teleported to the body | boolean | true / false | true |
| persistent | when select dropdown is inactive and persistent is false, select dropdown will be destroyed | boolean | true / false | true |
| 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 |
| scrollbar-always-on | Controls whether the scrollbar is always displayed | boolean | - | false |
| remote | whether search data from server | boolean | — | false |
| 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(keyword: string) | — | — |
SelectV2 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 选中值发生变化时触发 | val，目前的选中值 |
| visible-change | 下拉框出现/隐藏时触发 | val，出现则为 true，隐藏则为 false |
| remove-tag | 多选模式下移除 tag 时触发 | val，移除的 tag 值 |
| clear | 可清空的单选模式下用户点击清空按钮时触发 | — |
| blur | 当选择器的输入框失去焦点时触发 | (event: FocusEvent) |
| focus | 当选择器的输入框获得焦点时触发 | (event: FocusEvent) |
SelectV2 插槽
| 插槽名 | 说明 |
|---|---|
| default | 自定义 Option 模板 |
| empty | 自定义当选项为空时的内容 |
| prefix | 输入框的前缀 |