## 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 ``` ::: ### 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 | |---------- |-------- |---------- |------------- |-------- | | 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 búsqueda | 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 mili segundos 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 | — | — | ### Eventos de Cascader | Nombre | 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 Métodos | Método | Descripción | Parámetros | | ---- | ---- | ---- | | getCheckedNodes | Obtiene el array de los nodos seleccionados actualmente | (leafOnly) Si solo devuelve los nodos chequeados, por defecto es `false` | ### Slots de Cascader | Nombre | 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 | |---------- |-------- |---------- |------------- |-------- | | 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 | 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 | ### CascaderPanel Métodos | Método | Descripción | Parámetros | | ---- | ---- | ---- | | getCheckedNodes | Obtiene el array de los nodos seleccionados actualmente | (leafOnly) Si solo devuelve los nodos chequeados, por defecto es `false` | | clearCheckedNodes | Limpia de nodos chequeados | - | ### Slots de CascaderPanel | Nombre | 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' |