## Cascader
Si las opciones tienen una estructura jerárquica clara, se puede utilizar Cascader para verlas y seleccionarlas.
### Uso básico
Hay dos maneras de ampliar los elementos de opción hijos.
:::demo Asignar el atributo `options` a un array de opciones genera un Cascader. El atributo `props.expandTrigger` define cómo se expanden las opciones hijo.
```html
Child options expand when clicked (default)
Child options expand when hovered
```
:::
### Opción Disabled
Deshabilite una opción estableciendo el campo `disabled` en las opciones del objeto.
:::demo En este ejemplo, el primer ítem en el array `options` tiene un campo `disabled: true`, por lo que está deshabilitado. De forma predeterminada, Cascader comprueba el campo `disabled` en cada objeto de las opciones; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo `props.disabled` (consulte la tabla de la API a continuación para obtener más detalles). Y por supuesto, el nombre de campo `value`, `label` y `children` también se pueden personalizar de la misma manera.
```html
```
:::
### Limpiable
Establezca el atributo `clearable` para `el-cascader` y aparecerá un icono de borrado cuando se seleccione y se pase el ratón por encima.
:::demo
```html
```
:::
### Visualizar sólo el último nivel
La entrada puede mostrar sólo el último nivel en lugar de todos los niveles.
:::demo El atributo `show-all-levels` define si se muestran todos los niveles. Si es `false`, sólo se muestra el último nivel.
```html
```
:::
### Selección múltiple
Establezca `props.multiple = true` para usar la selección múltiple.
:::demo Cuando se utiliza la selección múltiple, todas las etiquetas seleccionadas se mostrarán de forma predeterminada, usted puede establecer `collapse-tags = true` para plegar las etiquetas seleccionadas.
```html
Display all tags (default)
Collapse tags
```
:::
### Seleccione cualquier nivel de opciones
En la selección única, sólo se pueden comprobar los nodos de la hoja, y en la selección múltiple, los nodos padres de la comprobación conducirán a que los nodos de la hoja se comprueben con el tiempo. Cuando se activa esta función, puede hacer que los nodos padre e hijo se desacoplen y usted puede seleccionar cualquier nivel de opciones.
:::demo Establezca `props.checkStrictly = true` para que el estado comprobado de un nodo no afecte a sus nodos padre y nodos hijos, y entonces podrá seleccionar cualquier nivel de opciones.
```html
Select any level of options (Single selection)
Select any level of options (Multiple selection)
```
:::
### Carga dinámica
Carga dinámica de sus nodos hijos cuando se selecciona un nodo.
:::demo Establezca `lazy = true` para utilizar la carga dinámica, y deberá especificar cómo cargar la fuente de datos mediante `lazyload`. Hay dos parámetros de `lazyload`, el primer parámetro `node` es el nodo en el que se hace clic actualmente, y el `resolve` es una llamada de retorno que indica que la carga ha terminado y que debe invocarse. Para mostrar el estado del nodo con mayor precisión, puede añadir un campo `leaf` (puede ser modificado por `props.leaf`) para indicar si se trata de un nodo de hoja. De lo contrario, se deducirá verificando si tiene algún nodo hijo.
```html
```
:::
### Filtrable
Buscar y seleccionar opciones con una palabra clave.
:::demo Añadir `filtrable` a `el-cascader` permite el filtrado. Cascader hará coincidir los nodos cuya etiqueta o etiqueta de padre (de acuerdo con `show-all-levels`) incluya una palabra clave de entrada. Por supuesto, puedes personalizar la lógica de búsqueda mediante el `filter-method` que acepta una función, el primer parámetro es `nodo`, el segundo es `keyword`, y necesitas devolver un valor booleano que indique si da en el blanco.
```html
Filterable (Single selection)
Filterable (Multiple selection)
```
:::
### Contenido de opciones personalizadas
Puede personalizar el contenido del nodo de cascada.
:::demo Puede personalizar el contenido del nodo del cascader mediante `scoped slot`. Tendrá acceso a `node` y `data` en el ámbito de aplicación, representando el objeto Node y los datos del nodo actual respectivamente.
```html
{{ data.label }}
({{ data.children.length }})
```
:::
### Panel cascader
`CascaderPanel` es el componente central de `Cascader` que tiene varias características como selección única, selección múltiple, carga dinámica, etc.
:::demo Al igual que `el-cascader`, puede establecer opciones alternativas mediante `options`, y habilitar otras características mediante `props`, consulte el formulario de la API a continuación para obtener más detalles.
```html
```
:::
### Atributos de Cascader
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------- | ----------- |
| model-value / v-model | valor ligado | - | — | — |
| options | datos de las opciones,las claves `value` y `label` pueden ser personalizadas por `Props`. | array | — | — |
| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
| size | tamaño del input | string | medium / small / mini | — |
| placeholder | placeholder del input | string | — | Select |
| disabled | si Cascader esta deshabilitada | boolean | — | false |
| clearable | si el valor seleccionado puede ser borrado | boolean | — | false |
| show-all-levels | si muestra todos los niveles del valor seleccionado en el input | boolean | — | true |
| collapse-tags | si se colapsan los tags en la selección múltiple | boolean | - | false |
| separator | separador de las etiquetas de las opciones | string | — | ' / ' |
| filterable | si las opciones pueden ser usadas para la busqueda | boolean | — | — |
| filter-method | lógica de búsqueda personalizable. El primer parámetro es `node`, el segundo es `keyword`, y es necesario devolver un valor boolean que indique si se ha tenido éxito. | function(node, keyword) | - | - |
| debounce | retraso en milisegundos para el tipeo de los datos de filtro | number | — | 300 |
| before-filter | hook antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se abortará el filtrado. | function(value) | — | — |
| popper-class | nombre de clase personalizado para el menú desplegable de Cascader | string | — | — |
| 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 |
### Eventos de Cascader
| Nombre del evento | Descripción | Parámetros |
| ----------------- | ------------------------------------------------------------------- | -------------------------------------------------- |
| change | se desencadena cuando cambia el valor ligado. | valor |
| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
| blur | se desencadena cuando Cascader se desenfoca | (event: Event) |
| focus | se activa cuando Cascader se enfoca | (event: Event) |
| visible-change | se activa cuando aparece/desaparece el menú desplegable | verdadero cuando aparece, y falso de otra manera |
| remove-tag | se activa cuando se quita la etiqueta en modo de selección múltiple | el valor de la etiqueta que se quita |
### Cascader Methods
| Method Name | Description | Parameters |
| --------------- | --------------------------------------- | ------------------------------------------------------------------------- |
| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
### Slots de Cascader
| Nombre del slot | Descripción |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
| empty | cuando no hay opciones coincidentes. |
### Atributos del CascaderPanel
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
| --------------------- | ------------------------------------------------------------------------------------------ | ------ | ----------------- | ----------- |
| model-value / v-model | valor ligado | - | — | — |
| options | datos de las opciones,las claves `value` y `label` pueden ser personalizadas por `Props`. | array | — | — |
| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
### Eventos de CascaderPanel
| Nombre de los evetos | Descripción | Parámetros |
| -------------------- | ----------------------------------------------------- | -------------------------------------------------- |
| change | se desencadena cuando cambia el valor ligado. | valor |
| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
### CascaderPanel Methods
| Method Name | Description | Parameters |
| ----------------- | --------------------------------------- | ------------------------------------------------------------------------- |
| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
| clearCheckedNodes | clear checked nodes | - |
### Slots de CascaderPanel
| Nombre del slot | Descripción |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
### Props
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ----------------- | ----------- |
| expandTrigger | modo de disparo de las opciones de ampliación | string | click / hover | 'click' |
| multiple | si la selección múltiple esta activada | boolean | - | false |
| checkStrictly | si el estado verificado de un nodo no afecta a sus nodos padre e hijo | boolean | - | false |
| emitPath | cuando los nodos marcados cambian, si emitir o no un array de la ruta de un nodo, si es falso, sólo emite el valor del nodo. | boolean | - | true |
| lazy | si se deben cargar dinámicamente nodos hijo, usarlo con el atributo `lazyload`. | boolean | - | false |
| lazyLoad | para cargar datos de nodos hijo, sólo funciona cuando `lazy` es verdadero | function(node, resolve) | - | - |
| value | especificar qué clave de objeto de nodo se utiliza como valor del nodo | string | — | 'value' |
| label | especificar qué clave de objeto de nodo se utiliza como etiqueta del nodo | string | — | 'label' |
| children | especificar qué clave de objeto de nodo se utiliza como hijo del nodo | string | — | 'children' |
| disabled | especificar qué clave de objeto de nodo se utiliza como nodo desactivado | string | — | 'disabled' |
| leaf | especificar qué clave de objeto de nodo se utiliza como campo de hoja del nodo | string | — | 'leaf' |