Select

Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.

TIP

After version 2.5.0, the default width of el-select changed to 100%. When used in a inline form, the width will collapse. In order to display the width properly, you need to give el-select a specific width.

TIP

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

Uso básico

Opción deshabilitada

Deshabilitar el select

Desactivar todo el componente.

Selección individual limpiable

Puede limpiar el Select con un icono.

Selección múltiple básica

Selección múltiple utiliza etiquetas para mostrar las opciones seleccionadas.

Plantilla personalizada

Puede personalizar plantillas HTML para opciones.

You can customize the header of the dropdown.

You can customize the footer of the dropdown.

Agrupando

Mostrar opciones en grupos.

Filtrado de opciones

Puede filtrar las opciones que desee.

Búsqueda remota

Introduzca palabras clave y busque los datos en el servidor.

Crear nuevos items

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

Usar el atributo value-key

Si el valor de vinculación de Select es un objeto, asegúrese de asignar value-key como su nombre único de clave de identidad.

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.

Select API

Select Attributes

Nombre	Descripción	Tipo	Default
model-value / v-model	valor vinculado	`string` / `number` / `boolean` / `object` / `array`	—
multiple	si multiple-select esta activo	`boolean`	false
disabled	si Select esta deshabilitado	`boolean`	false
value-key	si se colapsan los tags a un texto cuando `multiple` es `true`.	`string`	value
size	tamaño del input	`enum`	—
clearable	si el select puede ser limpiado	`boolean`	false
collapse-tags	si contraer etiquetas a un texto con la selección múltiple	`boolean`	false
collapse-tags-tooltip 2.3.0	si se muestran todas las etiquetas seleccionadas al pasar el ratón sobre el texto de las etiquetas colapsadas. Para usar esto, `collapse-tags` debe ser true	`boolean`	false
multiple-limit	máximo número de opciones que el usuario puede seleccionar cuando `multiple` es `true`. Sin límite cuando se fija a 0	`number`	0
name	el atributo `name` del input seleccionado	`string`	—
effect	tooltip theme, built-in theme: `dark` / `light`	`enum` / `string`	light
autocomplete	el atributo `autocomplete` del input seleccionado	`string`	off
placeholder	placeholder, default is 'Select'	`string`	—
filterable	si Select es filtrable	`boolean`	false
allow-create	si está permitido crear nuevos ítems. Para usar esto, `filterable` debe ser `true`.	`boolean`	false
filter-method	método de filtrado personalizado	`Function`	—
remote	si las opciones se traerán desde el servidor	`boolean`	false
remote-method	método de búsqueda remota personalizada	`Function`	—
remote-show-suffix	en el método de búsqueda remota mostrar icono del sufijo	`boolean`	false
loading	si Select está cargando datos del servidor	`boolean`	false
loading-text	displayed text while loading data from server, default is 'Loading'	`string`	—
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`, default is 'No data'	`string`	—
popper-class	nombre de clase personalizado para la lista desplegable de selección	`string`	''
reserve-keyword	when `multiple` and `filterable` is true, whether to reserve current keyword after selecting an option	`boolean`	true
default-first-option	seleccione la primera opción de coincidencia al introducir la clave. Usar con `filterable` o `remote`	`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
automatic-dropdown	for non-filterable Select, this prop decides if the option menu pops up when the input is focused	`boolean`	false
clear-icon	custom clear icon component	`string` / `object`	CircleClose
fit-input-width	whether the width of the dropdown is the same as the input	`boolean`	false
suffix-icon	custom suffix icon component	`string` / `object`	ArrowDown
suffix-transition deprecated	animation when dropdown appears/disappears icon	`boolean`	true
tag-type	tag type	`enum`	info
validate-event	whether to trigger form validation	`boolean`	true
placement 2.2.17	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']
max-collapse-tags 2.3.0	the max tags number to be shown. To use this, `collapse-tags` must be true	`number`	1
popper-options	popper.js parameters	`object`refer to popper.js doc	{}
aria-label a11y	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`	—

WARNING

suffix-transition has been deprecated, and will be removed in 2.4.0, please use override style scheme.

Select Events

Nombre	Descripción	Type
change	se dispara cuando el valor del select cambia	`Function`
visible-change	se dispara cuando el menú desplegable aparece o desaparece	`Function`
remove-tag	se dispara cuando un tag es removido en modo múltiple	`Function`
clear	se dispara cuando el icono se clickea en un Select limpiable	`Function`
blur	se dispara cuando el input pierde el foco	`Function`
focus	se dispara cuando el input obtiene el foco	`Function`

Select Slots

Nombre del slot	Descripción	Subtags
default	option component list	Option Group / Option
header 2.4.3	content at the top of the dropdown	—
footer 2.4.3	content at the bottom of the dropdown	—
prefix	contenido prefix de un Select	—
empty	Lista sin opciones	—
tag 2.5.0	content as Select tag	—
loading 2.5.2	content as Select loading	—

Select Exposes

Method	Descripción	Tipo
focus	focus the Input component	`Function`
blur	blur the Input component, and hide the dropdown	`Function`

Option Group API

Option Group Attributes

Nombre	Descripción	Type	Default
label	name of the group	`string`	—
disabled	whether to disable all options in this group	`boolean`	false

Option Group Slots

Nombre	Descripción	Subtags
default	customize default content	Option

Option API

Option Attributes

Name	Description	Type	Default
value	value of option	`string` / `number` / `boolean` / `object`	—
label	label of option, same as `value` if omitted	`string` / `number`	—
disabled	whether option is disabled	`boolean`	false

Option Slots

Name	Descripción
default	customize default content

Fuente

Componentes • Documentación

Contribuidores

Rate

Virtualized Select

Select #

Uso básico #

Opción deshabilitada #

Deshabilitar el select #

Selección individual limpiable #

Selección múltiple básica #

Plantilla personalizada #

Header of the dropdown 2.4.3 #

Footer of the dropdown 2.4.3 #

Agrupando #

Filtrado de opciones #

Búsqueda remota #

Crear nuevos items #

Usar el atributo value-key #

Custom Tag 2.5.0 #

Custom Loading 2.5.2 #

Empty Values 2.7.0 #

Select API #

Select Attributes #

Select Events #

Select Slots #

Select Exposes #

Option Group API #

Option Group Attributes #

Option Group Slots #

Option API #

Option Attributes #

Option Slots #

Fuente #

Contribuidores #