## 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 | | ---------------- | ---------------------------------------- | --------------- | --------------------- | ----------- | | value / v-model | valor seleccionado | array | — | — | | options | datos de las opciones | array | — | — | | props | opciones de configuracion, mire la tabla siguiente | object | — | — | | 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 la opcion activa del parent cambia, sólo funciona cuando `change-on-select` es `false`. | array de opciones activas | | blur | se dispara cuando Cascader pierde el foco | (event: Event) | | focus | se dispara cuando Cascader obtiene el foco | (event: Event) | | visible-change | se dispara cuando el menu desplegable aparece o desaparece | true cuando aparece, y false en otro caso |