Cascader ​

If the options have a clear hierarchical structure, Cascader can be used to view and select them.

Basic usage ​

There are two ways to expand child option items.

Disabled option ​

Disable an option by setting a disabled field in the option object.

Clearable ​

Set clearable attribute for el-cascader and a clear icon will appear when selected and hovered

Custom Clear Icon 2.11.0 ​

You can customize the clear icon by setting the clear-icon attribute

Display only the last level ​

The input can display only the last level instead of all levels.

Multiple Selection ​

Add :props="props" in tag and set data props = { multiple: true } to use multiple selection.

Do:

<template>
  <el-cascader :props="props" />
</template>

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

Don't do:

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

Select any level of options ​

In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.

Dynamic loading ​

Dynamic load its child nodes when checked a node.

Filterable ​

Search and select options with a keyword.

Custom option content ​

You can customize the content of cascader node.

Custom suggestion item 2.9.5 ​

You can customize the filter suggestion item by suggestion-item slot. You'll have access to item in the scope, standing for the suggestion item.

Cascader panel ​

CascaderPanel is the core component of Cascader which has various of features such as single selection, multiple selection, dynamic loading and so on.

Custom Tag 2.10.3 ​

You can customize tags.

Show Checked Strategy 2.10.5 ​

Control how selected values are displayed in multiple selection mode.

Click to Check Node 2.10.5 ​

Only using multiple or checkStrictly attributes.

You can add checkOnClickNode to be able to click on the node in addition with the prefix icon.
Toggle the visibility of the prefix with showPrefix.

Custom Header & Footer 2.10.5 ​

You can customize both the header and footer of the dropdown using slots.

Cascader API ​

Cascader Attributes ​

Cascader Events ​

Cascader Slots ​

Cascader Exposes ​

CascaderPanel API ​

CascaderPanel Attributes ​

CascaderPanel Events ​

CascaderPanel Slots ​

CascaderPanel Exposes ​

CascaderProps ​

Type Declarations ​

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, reject: () => void) => 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(): void
  emit(): void
  onParentCheck(checked: boolean): void
  onChildCheck(): void
  setCheckState(checked: boolean): void
  doCheck(checked: boolean): void
}

Node as CascaderNode

Source ​

Component • Style • Docs

Contributors ​