Cascader

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

TIP

Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).

Uso básico

Hay dos maneras de expandir elementos de opciones hijas.

Opción deshabilitada

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

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.

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:

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

No haga:

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

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.

Carga dinámica

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

Filtrable

Buscar y seleccionar opciones con una palabra clave.

Contenido de opción personalizada

Puede personalizar el contenido del nodo.

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.

Cascader API

Atributos de Cascader

Nombre	Descripción	Tipo	Por defecto
model-value / v-model	valor vinculado	`string`/`number`/`object`	—
options	los datos de las opciones, la clave de `value` y `label` pueden ser personalizados con `CascaderProps`.	`object`	—
props	opciones de configuración, vea la tabla `CascaderProps`.	`object`	—
size	tamaño del input	`enum`	—
placeholder	placeholder del input	`string`	—
disabled	si Cascader está desactivado	`boolean`	—
clearable	si el valor seleccionado puede ser borrado	`boolean`	—
show-all-levels	si se muestran todos los niveles del valor seleccionado en el input	`boolean`	true
collapse-tags	si se contraen las etiquetas en modo de selección múltiple	`boolean`	—
collapse-tags-tooltip	si 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 true	`boolean`	false
separator	separador de las etiquetas de las opciones	`string`	' / '
filterable	si se pueden buscar las opciones	`boolean`	—
filter-method	personaliza 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`	—
debounce	retardo al escribir la palabra clave del filtro, en milisegundos	`number`	300
before-filter	funció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-class	nombre de clase personalizado para la lista desplegable de Cascader	`string`	''
teleported	si el popup de la cascada es teletransportada	`boolean`	true
popper-append-to-body deprecated	si añadir o no el menú popup al body. Si la posición del popper es incorrecta, puedes intentar establecer esta prop a false	`boolean`	true
tag-type	tipo de etiqueta	`enum`	info
validate-event	si se debe activar la validación del formulario	`boolean`	true
max-collapse-tags 2.3.10	The max tags number to be shown. To use this, `collpase-tags` must be true	`number`	1
empty-values 2.7.0	empty values of component, see config-provider	`array`	—
value-on-clear 2.7.0	clear return value, see config-provider	`string` / `number` / `boolean` / `Function`	—

Eventos de Cascader

Nombre	Descripción	Tipo
change	se dispara cuando el valor cambia	`Function`
expand-change	se dispara cuando cambia la expansión	`Function`
blur	se dispara cuando se pierde el foco	`Function`
focus	se dispara cuando se obtiene el foco	`Function`
visible-change	se dispara cuando el desplegable aparece/desaparece	`Function`
remove-tag	se dispara cuando se elimina la etiqueta en modo de selección múltiple	`Function`

Cascader Slots

Nombre	Descripción	Alcance
default	el contenido personalizado del nodo en cascada, que son datos de nodo y el objeto del nodo actual respectivamente.	`object`
empty	contenido cuando no hay opciones coincidentes.	—

Exposiciones de Cascader

Nombre	Descripción	Tipo
getCheckedNodes	obtener un array del nodo seleccionado actualmente,(leafOnly) si solo devuelve los nodos verificados de la hoja, el valor predeterminado es `false`	`Function`
cascaderPanelRef	referencia del panel de cascada	`object`
togglePopperVisible 2.2.31	cambiar el tipo visible de popper	`Function`
contentRef	referencia al contenido del Cascader	`object`

CascaderPanel API

Atributos de CascaderPanel

Nombre	Descripción	Tipo	Por defecto
model-value / v-model	valor vinculado	`string`/`number`/`object`	—
options	los datos de las opciones, la clave de `value` y `label` pueden ser personalizados con `CascaderProps`.	`object`	—
props	opciones de configuración, vea la siguiente tabla `CascaderProps`.	`object`	—

Eventos CascaderPanel

Nombre	Descripción	Tipo
change	se dispara cuando el valor cambia	`Function`
expand-change	se dispara cuando cambia la expansión	`Function`
close	evento de panel de cierre, entregado a Cascader para aplazar la sentencia del panel.	`Function`

Slots de CascaderPanel

Nombre	Descripción	Alcance
default	el contenido personalizado del nodo en cascada, que son datos de nodo y el objeto del nodo actual respectivamente.	`object`

Exposición de CascaderPanel

Nombre	Descripción	Tipo
getCheckedNodes	obtener un array del nodo seleccionado actualmente,(leafOnly) si solo devuelve los nodos verificados de la hoja, el valor predeterminado es `false`	`Function`
clearCheckedNodes	borrar los nodos marcados	`Function`

CascaderProps

Atributo	Descripción	Tipo	Por defecto
expandTrigger	modo de activación de la expansión	`enum`	click
multiple	si la selección múltiple está habilitada	`boolean`	false
checkStrictly	si el marcado de un nodo no afecta a sus nodos padre e hijo	`boolean`	false
emitPath	si emitir un array de la ruta del nodo cuando los nodos marcados cambian, si es false solo emite el valor del nodo.	`boolean`	true
lazy	si la carga de nodos hijos es dinámica, use son el atributo `lazyload`	`boolean`	false
lazyLoad	método para la carga dinámica de nodos hijos, solo funciona cuando `lazy` es true	`Function`	—
value	especifica qué clave del objeto del nodo se utiliza como value	`string`	value
label	especifica qué clave del objeto del nodo se utiliza como label	`string`	label
children	especifica qué clave del nodo se utiliza como nodo hijo	`string`	children
disabled	especifica qué clave del nodo se utiliza para verificar si el nodo está deshabilitado o no	`string`	disabled
leaf	especifica qué clave del nodo se utiliza como campo leaf	`string`	leaf
hoverThreshold	umbral de expansión de las opciones	`number`	500

Declaraciones de tipo

Mostrar declaraciones

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