Skip to content

E
Element
Commit 83f05369 authored by Gonzalo2310's avatar Gonzalo2310
Browse files
Options

select.md spanish version

parent 560dd8c2
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 83 deletions
examples/docs/es/select.md
View file @ 83f05369
...@@ -105,11 +105,11 @@ ...@@ -105,11 +105,11 @@
states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"] states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
}; };
}, },
mounted() { mounted() {
this.list = this.states.map(item => { return { value: item, label: item }; }); this.list = this.states.map(item => { return { value: item, label: item }; });
}, },
methods: { methods: {
remoteMethod(query) { remoteMethod(query) {
if (query !== '') { if (query !== '') {
...@@ -134,11 +134,11 @@ ...@@ -134,11 +134,11 @@
## Select ## Select
When there are plenty of options, use a drop-down menu to display and select desired ones. Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.
### Basic usage ### Uso básico
:::demo `v-model` is the value of `el-option` that is currently selected. :::demo `v-model` es el valor de `el-option` que está seleccionado actualmente.
```html ```html
<template> <template>
...@@ -180,9 +180,9 @@ When there are plenty of options, use a drop-down menu to display and select des ...@@ -180,9 +180,9 @@ When there are plenty of options, use a drop-down menu to display and select des
``` ```
::: :::
### Disabled option ### Disabled en el-option
:::demo Set the value of `disabled` in `el-option` to `true` to disable this option. :::demo Establezca el valor de `disabled` en `el-option` como `true` para deshabilitar esta opción.
```html ```html
<template> <template>
...@@ -226,11 +226,12 @@ When there are plenty of options, use a drop-down menu to display and select des ...@@ -226,11 +226,12 @@ When there are plenty of options, use a drop-down menu to display and select des
``` ```
::: :::
### Disabled select ### Disabled en el-select
Desactivar todo el componente.
Disable the whole component. :::demo Configure `disabled` de `el-select` para deshabilitarla.
:::demo Set `disabled` of `el-select` to make it disabled.
```html ```html
<template> <template>
<el-select v-model="value3" disabled placeholder="Select"> <el-select v-model="value3" disabled placeholder="Select">
...@@ -271,11 +272,12 @@ Disable the whole component. ...@@ -271,11 +272,12 @@ Disable the whole component.
``` ```
::: :::
### Clearable single select ### Select simple limpiable
You can clear Select using a clear icon. 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.
:::demo Set `clearable` attribute for `el-select` and a clear icon will appear. Note that `clearable` is only for single select.
```html ```html
<template> <template>
<el-select v-model="value4" clearable placeholder="Select"> <el-select v-model="value4" clearable placeholder="Select">
...@@ -316,11 +318,12 @@ You can clear Select using a clear icon. ...@@ -316,11 +318,12 @@ You can clear Select using a clear icon.
``` ```
::: :::
### Basic multiple select ### Selección múltiple básica
Selección multiple utiliza tags para mostrar las opciones seleccionadas.
Multiple select uses tags to display selected options. :::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.
:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options.
```html ```html
<template> <template>
<el-select v-model="value5" multiple placeholder="Select"> <el-select v-model="value5" multiple placeholder="Select">
...@@ -361,11 +364,11 @@ Multiple select uses tags to display selected options. ...@@ -361,11 +364,11 @@ Multiple select uses tags to display selected options.
``` ```
::: :::
### Custom template ### Personalizar template
You can customize HTML templates for options. Puede personalizar templates HTML para las opciones.
:::demo Insert customized HTML templates into the slot of `el-option`. :::demo Inserte templates HTML personalizados en el slot de `el-option`.
```html ```html
<template> <template>
...@@ -412,11 +415,11 @@ You can customize HTML templates for options. ...@@ -412,11 +415,11 @@ You can customize HTML templates for options.
``` ```
::: :::
### Grouping ### Agrupando
Display options in groups. Mostrar opciones en grupos.
:::demo Use `el-option-group` to group the options, and its `label` attribute stands for the name of the group. :::demo Utilice `el-option-group` para agrupar las opciones, y su atributo `label` representa el nombre del grupo.
```html ```html
<template> <template>
...@@ -472,11 +475,12 @@ Display options in groups. ...@@ -472,11 +475,12 @@ Display options in groups.
``` ```
::: :::
### Option filtering ### Filtrado de opciones
You can filter options for your desired ones. 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.
:::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value.
```html ```html
<template> <template>
<el-select v-model="value8" filterable placeholder="Select"> <el-select v-model="value8" filterable placeholder="Select">
...@@ -517,11 +521,11 @@ You can filter options for your desired ones. ...@@ -517,11 +521,11 @@ You can filter options for your desired ones.
``` ```
::: :::
### Remote Search ### Búsqueda remota
Enter keywords and search data from server. Introduzca palabras y datos para buscar desde el servidor.
:::demo Set the value of `filterable` and `remote` with `true` to enable remote search, and you should pass the `remote-method`. `remote-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value. Note that if `el-option` is rendered with the `v-for` directive, you should add the `key` attribute for `el-option`. Its value needs to be unique, such as `item.value` in the following example. :::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 ```html
<template> <template>
...@@ -596,9 +600,11 @@ Enter keywords and search data from server. ...@@ -596,9 +600,11 @@ Enter keywords and search data from server.
``` ```
::: :::
### Create new items ### Crear nuevos items
Create and select new items that are not included in select options Crear y seleccionar nuevos items que no están incluidas en las opciones de selección.
:::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`.
:::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 ```html
<template> <template>
<el-select <el-select
...@@ -639,57 +645,59 @@ Create and select new items that are not included in select options ...@@ -639,57 +645,59 @@ Create and select new items that are not included in select options
::: :::
:::tip :::tip
If the binding value of Select is an object, make sure to assign `value-key` as its unique identity key name.
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 Attributes ### Select atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | -------------------- | ---------------------------------------- | -------- | ----------------- | ---------------- |
| multiple | whether multiple-select is activated | boolean | — | false | | multiple | si multiple-select esta activo | boolean | — | false |
| disabled | whether Select is disabled | boolean | — | false | | disabled | si Select esta deshabilitado | boolean | — | false |
| value-key | unique identity key name for value, required when value is an object | string | — | value | | value-key | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string | — | value |
| size | size of Input | string | large/small/mini | — | | size | tamaño del Input | string | large/small/mini | — |
| clearable | whether single select can be cleared | boolean | — | false | | clearable | si el single select puede ser limpiable | boolean | — | false |
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 | | 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 | the name attribute of select input | string | — | — | | name | el atributo `name` del input seleccionado | string | — | — |
| placeholder | placeholder | string | — | Select | | placeholder | placeholder | string | — | Select |
| filterable | whether Select is filterable | boolean | — | false | | filterable | si Select es filtrable | boolean | — | false |
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false | | allow-create | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean | — | false |
| filter-method | custom filter method | function | — | — | | filter-method | metodo de filtrado personalizado | function | — | — |
| remote | whether options are loaded from server | boolean | — | false | | remote | si las opciones se traeran desde el servidor | boolean | — | false |
| remote-method | custom remote search method | function | — | — | | remote-method | metodo de busqueda remota personalizada | function | — | — |
| loading | whether Select is loading data from server | boolean | — | false | | loading | si Select está cargando datos del servidor | boolean | — | false |
| loading-text | displayed text while loading data from server | string | — | Loading | | loading-text | texto mostrado durante la carga de datos del servidor | string | — | Loading |
| no-match-text | displayed text when no data matches the filtering query | string | — | No matching data | | no-match-text | texto mostrado cuando ningún dato coincide con la consulta de filtrado. | string | — | No matching data |
| no-data-text | displayed text when there is no options | string | — | No data | | no-data-text | texto mostrado cuando no hay opciones | string | — | No data |
| popper-class | custom class name for Select's dropdown | string | — | — | | popper-class | nombre de clase personalizado para el menú desplegable del Select | string | — | — |
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false | | 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 | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false | | default-first-option | seleccione la primera opción de coincidencia en la tecla enter. Uso con `filterable` o `remote`. | boolean | - | false |
### Select Events ### Select Eventos
| Event Name | Description | Parameters | | Nombre | Descripción | Parametros |
|---------|---------|---------| | -------------- | ---------------------------------------- | ---------------------------------------- |
| change | triggers when the selected value changes | current selected value | | change | se dispara cuando el valor del select cambia | valor actual del select |
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise | | visible-change | se dispara cuando el menu desplegable aparece o desaparece | true cuando aparece, y false en otro caso |
| remove-tag | triggers when a tag is removed in multiple mode | removed tag value | | remove-tag | se dispara cuando un tag es removido en modo multiple | el valor del tag removido |
| clear | triggers when the clear icon is clicked in a clearable Select | — | | clear | se dispara cuando el icono se clickea en un Select limpiable | — |
| blur | triggers when Input blurs | (event: Event) | | blur | se dispara cuando el input pierde el foco | (event: Event) |
| focus | triggers when Input focuses | (event: Event) | | focus | se dispara cuando el input obtiene el foco | (event: Event) |
### Option Group Attributes ### Atributos del grupo de opciones
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | -------- | ---------------------------------------- | ------- | ----------------- | ----------- |
| label | name of the group | string | — | — | | label | nombre del grupo | string | — | — |
| disabled | whether to disable all options in this group | boolean | — | false | | disabled | si se deshabilitan todas las opciones del grupo | boolean | — | false |
### Option Attributes ### Atributos de opciones
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |
| value | value of option | string/number/object | — | — | | value | valor de option | string/number/object | — | — |
| label | label of option, same as `value` if omitted | string/number | — | — | | label | etiqueta de option, es igual a `value` si se omite | string/number | — | — |
| disabled | whether option is disabled | boolean | — | false | | disabled | si option esta deshabilitado | boolean | — | false |
### Methods ### Metodos
| Method | Description | Parameters | | Metodo | Descripción | Parametros |
|------|--------|-------| | ------ | --------------------------- | ---------- |
| focus | focus the Input component | - | | focus | Foco en el componente input | - |
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment