## Select Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee. ### Uso básico :::demo `v-model` es el valor de `el-option` que está seleccionado actualmente. ```html ``` ::: ### Disabled en el-option :::demo Establezca el valor de `disabled` en `el-option` como `true` para deshabilitar esta opción. ```html ``` ::: ### Disabled en el-select Desactivar todo el componente. :::demo Configure `disabled` de `el-select` para deshabilitarla. ```html ``` ::: ### Select simple limpiable Puede limpiar un Select con un icono. :::demo Establezca el atributo `clearable` para `el-select` y aparecerá un icono. Tenga en cuenta que la opción `clearable` es sólo para una selección individual. ```html ``` ::: ### Selección múltiple básica Selección multiple utiliza tags para mostrar las opciones seleccionadas. :::demo Configure el atributo `multiple` para `el-select` para habilitar el modo múltiple. En este caso, el valor del `v-model` será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo `collapse-tags`. ```html ``` ::: ### Personalizar template Puede personalizar templates HTML para las opciones. :::demo Inserte templates HTML personalizados en el slot de `el-option`. ```html ``` ::: ### Agrupando Mostrar opciones en grupos. :::demo Utilice `el-option-group` para agrupar las opciones, y su atributo `label` representa el nombre del grupo. ```html ``` ::: ### Filtrado de opciones Puede filtrar opciones como lo desee. :::demo Añadir `filterable` a `el-select` permite filtrar. Por defecto, Select buscará todas las opciones cuyo atributo`label` contenga el valor del input. Si prefiere otras estrategias de filtrado, puede pasar el `filter-method`. `filter-method` es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. ```html ``` ::: ### Búsqueda remota Introduzca palabras y datos para buscar desde el servidor. :::demo Configure el valor de `filterable` y `remote` con `true` para habilitar la búsqueda remota, y debería pasar el método `remote-method`. `remote-method` es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. Tenga en cuenta que si `el-option` se presenta con la directiva `v-for`, debe agregar el atributo `key` para `el-option`. Su valor tiene que ser unívoco, como el valor de `item.value` en el ejemplo siguiente. ```html ``` ::: ### Crear nuevos items Crear y seleccionar nuevos items que no están incluidas en las opciones de selección. :::demo Al utilizar el atributo `allow-create`, los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que `allow-create` funcione, `filterable` debe ser `true`. ```html ``` ::: :::tip Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `value-key` como el nombre único de la clave de identidad. ::: ### Select atributos | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | -------------------- | ---------------------------------------- | -------- | ----------------- | ---------------- | | multiple | si multiple-select esta activo | boolean | — | false | | disabled | si Select esta deshabilitado | boolean | — | false | | collapse-tags | si se colapsan los tags a un texto cuando `multiple` es `true`. | boolean | — | false | | value-key | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string | — | value | | size | tamaño del Input | string | large/small/mini | — | | clearable | whether select can be cleared | boolean | — | false | | multiple-limit | maximo numero 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 | — | — | | autocomplete | el atributo `autocomplete` del input seleccionado | string | — | off | | auto-complete | @DEPRECATED in next major version | string | — | off | | placeholder | placeholder | string | — | Select | | filterable | si Select es filtrable | boolean | — | false | | allow-create | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean | — | false | | filter-method | metodo de filtrado personalizado | function | — | — | | remote | si las opciones se traeran desde el servidor | boolean | — | false | | remote-method | metodo de busqueda remota personalizada | function | — | — | | loading | si Select está cargando datos del servidor | boolean | — | false | | loading-text | texto mostrado durante la carga de datos del servidor | string | — | Loading | | no-match-text | texto mostrado cuando ningún dato coincide con la consulta de filtrado. | string | — | No matching data | | no-data-text | texto mostrado cuando no hay opciones | string | — | No data | | popper-class | nombre de clase personalizado para el menú desplegable del Select | string | — | — | | reserve-keyword | cuando `multiple` y `filter` es `true`, si se debe reservar la palabra clave actual después de seleccionar una opción. | boolean | — | false | | default-first-option | seleccione la primera opción de coincidencia en la tecla enter. Uso con `filterable` o `remote`. | boolean | - | false | | popper-append-to-body| si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este `prop` en `false`. | boolean | - | true | | automatic-dropdown | para non-filterable Select, este `prop` decide si el menú de opciones aparece cuando la entrada está enfocada | boolean | - | false | ### Eventos Select | Nombre | Descripción | Parametros | | -------------- | ---------------------------------------- | ---------------------------------------- | | change | se dispara cuando el valor del select cambia | valor actual del select | | visible-change | se dispara cuando el menu desplegable aparece o desaparece | true cuando aparece, y false en otro caso | | remove-tag | se dispara cuando un tag es removido en modo multiple | el valor del tag removido | | clear | se dispara cuando el icono se clickea en un Select limpiable | — | | blur | se dispara cuando el input pierde el foco | (event: Event) | | focus | se dispara cuando el input obtiene el foco | (event: Event) | ### Select Slots | Name | Description | |---------|-------------| | — | lista de los componentes Option | | prefix | contenido prefix de un Select | ### Atributos del grupo de opciones | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | -------- | ---------------------------------------- | ------- | ----------------- | ----------- | | label | nombre del grupo | string | — | — | | disabled | si se deshabilitan todas las opciones del grupo | boolean | — | false | ### Atributos de opciones | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- | | value | valor de option | string/number/object | — | — | | label | etiqueta de option, es igual a `value` si se omite | string/number | — | — | | disabled | si option esta deshabilitado | boolean | — | false | ### Metodos | Metodo | Descripción | Parametros | | ------ | --------------------------- | ---------- | | focus | Foco en el componente input | - | | blur | Quita el focus del componente y oculta el dropdown | - |