Cascader ​

Si las opciones tienen una estructura jerárquica clara, Cascader puede ser utilizado para visualizarlas y seleccionarlas.

Uso básico ​

Hay dos maneras de expandir elementos de opciones hijas.

Asignando el atributo options a un array de opciones, renderiza un Cascader. El atributo props.expandedTrigger define cómo se expanden las opciones hijas.

Child options expand when clicked (default)

Child options expand when hovered

Opción deshabilitada ​

Deshabilite una opción estableciendo el campo disabled en el objeto de la opción.

En este ejemplo, el primer elemento en el array options tiene un campo disabled: true, así que está desactivado. Por defecto, Cascader comprueba el campo disabled en cada objeto de las opciones; si se está usando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo props.disabled (ver la tabla API de abajo para más detalles). Y por supuesto, los nombres de los campos value, label y children también pueden ser personalizados de la misma manera.

Limpiable ​

Asigne al atributo clearable a el-cascader y un icono de limpieza aparecerá cuando sea seleccionado y actualizado

Mostrar solo el último nivel ​

La entrada sólo puede mostrar el último nivel en lugar de todos los niveles.

El atributo show-all-levels define si todos los niveles son mostrados. Si es false, solo se muestra el último nivel.

Selección múltiple ​

Añada :props="props" en la etiqueta y establezca el dato props = { multiple: true } para usar la selección múltiple.

Hacer:

html
<template>
  <el-cascader :props="props" />
</template>
<script lang="ts" setup>
  const props = { multiple: true }
</script>

No haga:

html
<template>
  <!--  Object literal binging here is invalid syntax for cascader  -->
  <el-cascader :props="{ multiple: true }" />
</template>

Cuando se utiliza selección múltiple, todas las etiquetas seleccionadas se mostrarán por defecto. Puede establecer collapse-tags = true para plegar las etiquetas seleccionadas. You can set max-collapse-tags to show max tags number, default 1. You can check them when mouse hover collapse text by using collapse-tags-tooltip attribute.

Display all tags (default)

Collapse tags

Collapse tags tooltip

Max Collapse Tags

Seleccione cualquier nivel de opciones ​

En una selección simple, solo los nodos de hoja pueden ser marcados, y en una selección múltiple, marcar los nodos padre conducirá a que los nodos de hoja sean marcados eventualmente. Cuando se habilita esta función, puede hacer que los nodos padre e hijo se desvinculen y puede seleccionar cualquier nivel de opciones.

Asigne props.checkStrictly = true para que el estado de marcado de un nodo no afecte a sus nodos padres y nodos hijos, entonces puede seleccionar cualquier nivel de opciones.

Select any level of options (Single selection)

Select any level of options (Multiple selection)

Carga dinámica ​

Carga dinámica de los nodos hijos cuando se marca un nodo.

Asigne lazy = true para usar carga dinámica, y tiene que especificar cómo cargar la fuente de datos por lazyload. Hay dos parámetros de lazyload, el primer parámetro node es el nodo en el que se ha hecho clic actualmente, y resolve es un callback que indica que la carga ha terminado, el cual debe ser invocado. Para mostrar el estado del nodo de forma más precisa, se puede agregar el campo leaf (puede ser modificado por props.leaf) para indicar si es un nodo de hoja. En caso contrario, se deducirá si tiene algún nodo hijo.

Filtrable ​

Buscar y seleccionar opciones con una palabra clave.

Añadiendo filterable al el-cascader habilita el filtro. Cascader mostrará coincidencia con los nodos cuya etiqueta o etiqueta del padre (según show-all-levels) incluye la palabra clave. Por supuesto, puede personalizar la lógica de búsqueda mediante filter-method que acepta una función, el primer parámetro es node, el segundo es keyword, y necesita devolver un valor booleano indicando si es válido.

Filterable (Single selection)

Filterable (Multiple selection)

Contenido de opción personalizada ​

Puede personalizar el contenido del nodo.

Puede personalizar el contenido del nodo mediante scoped slot. Tendrá acceso a nodo y data en el ámbito, representando el objeto Nodo y los datos del nodo actual, respectivamente.

Panel de Cascader ​

CascaderPanel es el componente central de Cascader que tiene varias características como una sola selección, selección múltiple, carga dinámica, etc.

Al igual que el-cascader, puede establecer opciones alternativas options, y habilitar otras características por props, vea el formulario de la API de abajo para más detalles.

Cascader API ​

Atributos de Cascader ​

NombreDescripciónTipoPor defecto
model-value / v-modelvalor vinculadostring/number/object—
optionslos datos de las opciones, la clave de value y label pueden ser personalizados con CascaderProps.object—
propsopciones de configuración, vea la tabla CascaderProps.object—
sizetamaño del inputenum—
placeholderplaceholder del inputstring—
disabledsi Cascader está desactivadoboolean—
clearablesi el valor seleccionado puede ser borradoboolean—
show-all-levelssi se muestran todos los niveles del valor seleccionado en el inputbooleantrue
collapse-tagssi se contraen las etiquetas en modo de selección múltipleboolean—
collapse-tags-tooltipsi se muestran todas las etiquetas seleccionadas al pasar el ratón sobre el texto de las etiquetas colapsadas. Para usar esto, collapse-tags debe ser truebooleanfalse
separatorseparador de las etiquetas de las opcionesstring' / '
filterablesi se pueden buscar las opcionesboolean—
filter-methodpersonaliza la lógica de búsqueda, el primer parámetro es node, el segundo es keyword, y necesita devolver un valor booleano indicando si es válido.Function—
debounceretardo al escribir la palabra clave del filtro, en milisegundosnumber300
before-filterfunción hook anterior al filtro con el valor a ser filtrado como su parámetro. Si se devuelve false o se devuelve una Promise y luego se rechaza, el filtrado se abortaráFunction—
popper-classnombre de clase personalizado para la lista desplegable de Cascaderstring''
teleportedsi el popup de la cascada es teletransportadabooleantrue
tag-typetipo de etiquetaenuminfo
tag-effect 2.7.8tag effectenumlight
validate-eventsi se debe activar la validación del formulariobooleantrue
max-collapse-tags 2.3.10The max tags number to be shown. To use this, collpase-tags must be truenumber1
empty-values 2.7.0empty values of component, see config-providerarray—
value-on-clear 2.7.0clear return value, see config-providerstring / number / boolean / Function—
persistent 2.7.8when dropdown is inactive and persistent is false, dropdown will be destroyedbooleantrue
fallback-placements 2.8.1list of possible positions for Tooltip popper.jsarrary—
placement 2.8.1position of dropdownenumbottom-start
popper-append-to-body deprecatedsi añadir o no el menú popup al body. Si la posición del popper es incorrecta, puedes intentar establecer esta prop a falsebooleantrue

Eventos de Cascader ​

NombreDescripciónTipo
changese dispara cuando el valor cambiaFunction
expand-changese dispara cuando cambia la expansiónFunction
blurse dispara cuando se pierde el focoFunction
focusse dispara cuando se obtiene el focoFunction
clear 2.7.7triggers when the clear icon is clicked in a clearable SelectFunction
visible-changese dispara cuando el desplegable aparece/desapareceFunction
remove-tagse dispara cuando se elimina la etiqueta en modo de selección múltipleFunction

Cascader Slots ​

NombreDescripciónAlcance
defaultel contenido personalizado del nodo en cascada, que son datos de nodo y el objeto del nodo actual respectivamente.object
emptycontenido cuando no hay opciones coincidentes.—

Exposiciones de Cascader ​

NombreDescripciónTipo
getCheckedNodesobtener un array del nodo seleccionado actualmente,(leafOnly) si solo devuelve los nodos verificados de la hoja, el valor predeterminado es falseFunction
cascaderPanelRefreferencia del panel de cascadaobject
togglePopperVisible 2.2.31cambiar el tipo visible de popperFunction
contentRefreferencia al contenido del Cascaderobject
presentText 2.8.4selected content textobject

CascaderPanel API ​

Atributos de CascaderPanel ​

NombreDescripciónTipoPor defecto
model-value / v-modelvalor vinculadostring/number/object—
optionslos datos de las opciones, la clave de value y label pueden ser personalizados con CascaderProps.object—
propsopciones de configuración, vea la siguiente tabla CascaderProps.object—

Eventos CascaderPanel ​

NombreDescripciónTipo
changese dispara cuando el valor cambiaFunction
expand-changese dispara cuando cambia la expansiónFunction
closeevento de panel de cierre, entregado a Cascader para aplazar la sentencia del panel.Function

Slots de CascaderPanel ​

NombreDescripciónAlcance
defaultel contenido personalizado del nodo en cascada, que son datos de nodo y el objeto del nodo actual respectivamente.object
empty 2.8.3the content of the panel when there is no data.—

Exposición de CascaderPanel ​

NombreDescripciónTipo
getCheckedNodesobtener un array del nodo seleccionado actualmente,(leafOnly) si solo devuelve los nodos verificados de la hoja, el valor predeterminado es falseFunction
clearCheckedNodesborrar los nodos marcadosFunction

CascaderProps ​

AtributoDescripciónTipoPor defecto
expandTriggermodo de activación de la expansiónenumclick
multiplesi la selección múltiple está habilitadabooleanfalse
checkStrictlysi el marcado de un nodo no afecta a sus nodos padre e hijobooleanfalse
emitPathsi emitir un array de la ruta del nodo cuando los nodos marcados cambian, si es false solo emite el valor del nodo.booleantrue
lazysi la carga de nodos hijos es dinámica, use son el atributo lazyloadbooleanfalse
lazyLoadmétodo para la carga dinámica de nodos hijos, solo funciona cuando lazy es trueFunction—
valueespecifica qué clave del objeto del nodo se utiliza como valuestringvalue
labelespecifica qué clave del objeto del nodo se utiliza como labelstringlabel
childrenespecifica qué clave del nodo se utiliza como nodo hijostringchildren
disabledespecifica qué clave del nodo se utiliza para verificar si el nodo está deshabilitado o nostringdisabled
leafespecifica qué clave del nodo se utiliza como campo leafstringleaf
hoverThresholdumbral de expansión de las opcionesnumber500

Declaraciones de tipo ​

Mostrar declaraciones
ts
type CascaderNodeValue = string | number
type CascaderNodePathValue = CascaderNodeValue[]
type CascaderValue =
  | CascaderNodeValue
  | CascaderNodePathValue
  | (CascaderNodeValue | CascaderNodePathValue)[]

type Resolve = (data: any) => void

type ExpandTrigger = 'click' | 'hover'

type LazyLoad = (node: Node, resolve: Resolve) => void

type isDisabled = (data: CascaderOption, node: Node) => boolean

type isLeaf = (data: CascaderOption, node: Node) => boolean

interface CascaderOption extends Record<string, unknown> {
  label?: string
  value?: CascaderNodeValue
  children?: CascaderOption[]
  disabled?: boolean
  leaf?: boolean
}

interface CascaderProps {
  expandTrigger?: ExpandTrigger
  multiple?: boolean
  checkStrictly?: boolean
  emitPath?: boolean
  lazy?: boolean
  lazyLoad?: LazyLoad
  value?: string
  label?: string
  children?: string
  disabled?: string | isDisabled
  leaf?: string | isLeaf
  hoverThreshold?: number
}

class Node {
  readonly uid: number
  readonly level: number
  readonly value: CascaderNodeValue
  readonly label: string
  readonly pathNodes: Node[]
  readonly pathValues: CascaderNodePathValue
  readonly pathLabels: string[]

  childrenData: ChildrenData
  children: Node[]
  text: string
  loaded: boolean
  /**
   * Is it checked
   *
   * @default false
   */
  checked: boolean
  /**
   * Used to indicate the intermediate state of unchecked and fully checked child nodes
   *
   * @default false
   */
  indeterminate: boolean
  /**
   * Loading Status
   *
   * @default false
   */
  loading: boolean

  // getter
  isDisabled: boolean
  isLeaf: boolean
  valueByOption: CascaderNodeValue | CascaderNodePathValue

  // method
  appendChild(childData: CascaderOption): Node
  calcText(allLevels: boolean, separator: string): string
  broadcast(event: string, ...args: unknown[]): void
  emit(event: string, ...args: unknown[]): void
  onParentCheck(checked: boolean): void
  onChildCheck(): void
  setCheckState(checked: boolean): void
  doCheck(checked: boolean): void
}

Node as CascaderNode

Fuente ​

Componentes • Style • Documentación

Contribuidores ​