## Cascader
Si las opciones tienen una estructura jerárquica clara, Cascader puede utilizarse para visualizarlas y seleccionarlas.
### Uso básico
Existen dos maneras de expandir los elementos hijo de la opción.
:::demo Al asignar al atributo `options` un array de opciones, se genera un Cascader. El atributo `expand-trigger` define cómo se expanden las opciones hijo. Este ejemplo también muestra el evento `change` , cuyo parámetro es el valor de Cascader, un array formado por los valores de cada nivel seleccionado.
```html
Child options expand when clicked (default)
Child options expand when hovered
```
:::
### Opcion Disabled
Para desactivar una opción configure un campo `disabled` en el objeto de opción.
:::demo En este ejemplo, el primer elemento del array `options` tiene un campo `disabled: true` , por lo que está desactivado. Por defecto, Cascader verifica el campo `disabled` en cada objeto de opción; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo `props` (consulte la tabla API a continuación para obtener más detalles). Y por supuesto, el valor de `value`, `label` y `children` también se pueden personalizar de la misma manera.
```html
```
:::
### Mostrar sólo el último nivel
Puede mostrar sólo el último nivel en lugar de todos los niveles.
:::demo El atributo `show-all-levels` define si se visualizan todos los niveles. Si es `false`, sólo se muestra el último nivel.
```html
```
:::
### Con valor por defecto
:::demo El valor por defecto se puede definir con un array.
```html
```
:::
### Change on select
También se pueden seleccionar las opciones del elemento padre.
:::demo Por defecto sólo se pueden seleccionar las opciones del último nivel. Al asignar `change-on-select` a `true`, también se pueden seleccionar opciones en los niveles superiores.
```html
```
:::
### Carga dinamica de elementos hijos
Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el elemento padre o se pasa el ratón sobre el.
:::demo En este ejemplo, el array de opciones no tiene datos de ciudades cuando se inicializa. Con el evento `active-item-change`, puede cargar dinámicamente las ciudades de un estado específico. Además, este ejemplo también demuestra cómo se utilizan los`props`.
```html
```
:::
### Filtrable
Buscar y seleccionar opciones con una palabra clave.
:::demo Añadir `filterable` a `el-cascader` permite filtrar
```html
Only options of the last level can be selected
Options of all levels can be selected
```
:::
### Atributos
| Atributo | Descripción | Tipo | Opciones | Por defecto |
| ---------------- | ---------------------------------------- | --------------- | --------------------- | ----------- |
| options | datos de las opciones | array | — | — |
| props | opciones de configuracion, mire la tabla siguiente | object | — | — |
| value | valor seleccionado | array | — | — |
| popper-class | nombre de clase para el Cascader's dropdown | string | — | — |
| placeholder | input placeholder | string | — | Select |
| disabled | si Cascader esta disabled | boolean | — | false |
| clearable | si se puede borrar el valor seleccionado | boolean | — | false |
| expand-trigger | evento del elemento actual para expandirse. | string | click / hover | click |
| show-all-levels | si mostrar todos los niveles del valor seleccionado en la entrada | boolean | — | true |
| filterable | si se pueden buscar las opciones | boolean | — | — |
| debounce | retardo al escribir la palabra clave del filtro, en milisegundos | number | — | 300 |
| change-on-select | si se permite seleccionar una opción de cualquier nivel | boolean | — | false |
| size | tamaño del input | string | medium / small / mini | — |
| before-filter | funcion antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego es rechazada, el filtrado será abortado. | function(value) | — | — |
### props
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
| label | especifica qué clave del elemento de la opción se utiliza como etiqueta | string | — | — |
| value | especifica qué clave del elemento de la opción se utiliza como valor | string | — | — |
| children | especifica qué clave del elemento de la opción se utiliza como hijo | string | — | — |
| disabled | especifica qué clave del elemento de la opción indica si está deshabilitada | string | — | — |
### Eventos
| Nombre | Descripción | Parametros |
| ------------------ | ---------------------------------------- | ------------------------- |
| change | se dispara cuando el valor cambia | valor |
| active-item-change | se dispara cuando cambia la opción activa, sólo funciona cuando `change-on-select` es `false`. | array de opciones activas |