Virtualized Select

TIP

Este componente todavía está en pruebas, si encuentra algún error o problema, por favor infórmenos en GitHub para que lo arreglemos.

TIP

Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).

Fondo

En algunos casos de uso, un selector puede terminar cargando decenas de miles de filas de datos. Renderizar esa cantidad de datos en el DOM podría ser una carga para el navegador, lo que puede resultar en problemas de rendimiento. Para una mejor experiencia de usuario y desarrollador, decidimos añadir este componente.

Uso Básico

El selector más simple

Selección múltiple

El selector básico de selección múltiple con etiquetas

Ocultar etiquetas extra cuando los elementos seleccionados son demasiados.

Puede colapsar las etiquetas a un texto usando el atributo collapse-tags. Puede comprobarlos cuando el ratón pasa el cursor sobre el texto usando el atributo collapse-tags-tooltip.

Selección múltiple filtrable

Cuando las opciones son demasiado grandes, puedes usar la opción filterable para habilitar la función de filtro para encontrar la opción deseada

Deshabilitar el selector y las opciones de selección

Puede elegir desactivar el selector en sí mismo o la opción.

Grupo de opciones

Podemos agrupar la opción como quiera, siempre y cuando los datos satisfagan el patrón.

Limpiando el selector

Podemos borrar todas las opciones seleccionadas a la vez, también aplicables para una única selección.

Personalizar las opciones de renderizado

Podemos definir nuestra propia plantilla para renderizar la opción en la ventana emergente.

You can customize the header of the dropdown.

You can customize the footer of the dropdown.

Crear nuevos ítems

Crear y seleccionar nuevos elementos que no están incluidos en las opciones de selección

Al usar el atributo allow-create, los usuarios pueden crear nuevos elementos escribiendo en el cuadro de entrada. Tenga en cuenta que para que allow-create funcione, filterable debe ser true.

TIP

Es mejor establecer :reserve-keyword="false" cuando se use allow-create

Búsqueda remota

Introduzca palabras clave y datos de búsqueda desde el servidor.

Use value-key attribute

when options.value is an object, you should set a unique identity key name for value

TIP

Before 2.4.0, value-key was used both as the unique value of the selected object and as an alias for the value in options. Now value-key is only used as the unique value of the selected object, and the alias for the value in options is props.value.

Aliases for custom options 2.4.2

When your options format is different from the default format, you can customize the alias of the options through the props attribute

Custom Tag 2.5.0

You can customize tags.

Custom Loading 2.5.2

Override loading content.

Empty Values 2.7.0

If you want to support empty string, please set empty-values to [null, undefined].

If you want to change the clear value to null, please set value-on-clear to null.

API

Attributes

Nombre	Descripción	Tipo	Por defecto
model-value / v-model	binding value	`string` / `number` / `boolean` / `object` / `array`	—
options	data of the options, the key of `value` and `label` can be customize by `props`	`array`	—
props 2.4.2	configuration options, see the following table	`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	size of component	`enum`	''
clearable	whether select can be cleared	`boolean`	false
clear-icon	custom clear icon	`string` / `object`	CircleClose
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`	—
effect	tooltip theme, built-in theme: `dark` / `light`	`enum` / `string`	light
autocomplete	autocomplete of select input	`string`	off
placeholder	placeholder	`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
filter-method	custom filter method	`Function`	—
loading	whether Select is loading data from server	`boolean`	false
loading-text	displayed text while loading data from server, default is 'Loading'	`string`	—
reserve-keyword	whether reserve the keyword after select filtered option.	`boolean`	true
no-match-text	displayed text when no data matches the filtering query, you can also use slot `empty`, default is 'No matching data'	`string`	—
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
persistent	when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed	`boolean`	true
popper-options	popper.js parameters	`object`refer to popper.js doc	{}
automatic-dropdown	for non-filterable Select, this prop decides if the option menu pops up when the input is focused	`boolean`	false
height	The height of the dropdown panel, 34px for each item	`number`	274
item-height	The height of the dropdown item	`number`	34
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`	—
validate-event	whether to trigger form validation	`boolean`	true
placement	position of dropdown	`enum`	bottom-start
fallback-placements 2.5.6	list of possible positions for dropdown popper.js	`array`	['bottom-start', 'top-start', 'right', 'left']
collapse-tags-tooltip 2.3.0	whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true	`boolean`	false
max-collapse-tags 2.3.0	The max tags number to be shown. To use this, `collapse-tags` must be true	`number`	1
tag-type 2.5.0	tag type	`enum`	info
aria-label a11y 2.5.0	same as `aria-label` in native input	`string`	—
empty-values 2.7.0	empty values of component, see config-provider	`array`	—
value-on-clear 2.7.0	clear return value, see config-provider	`string` / `number` / `boolean` / `Function`	—

props

Attribute	Descripción	Type	Default
value	specify which key of node object is used as the node's value	`string`	value
label	specify which key of node object is used as the node's label	`string`	label
options	specify which key of node object is used as the node's children	`string`	options
disabled	specify which key of node object is used as the node's disabled	`string`	disabled

Events

Nombre	Descripción	Type
change	triggers when the selected value changes, the param is current selected value	`Function`
visible-change	triggers when the dropdown appears/disappears, the param will be true when it appears, and false otherwise	`Function`
remove-tag	triggers when a tag is removed in multiple mode, the param is removed tag value	`Function`
clear	triggers when the clear icon is clicked in a clearable Select	`Function`
blur	triggers when Input blurs	`Function`
focus	triggers when Input focuses	`Function`

Slots

Name	Description
default	Option renderer
header 2.5.2	content at the top of the dropdown
footer 2.5.2	content at the bottom of the dropdown
empty	content when options is empty
prefix	prefix content of input
tag 2.5.0	content as Select tag
loading 2.5.2	content as Select loading