El Cascader

Cascader Component

Cascader displays and selects options with clear hierarchical structure.

When to Use

• Region/location selection
• Category hierarchies
• Organizational structures
• Multi-level navigation

Basic Usage

  

import { ref } from 'vue'

const value = ref([])
const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      { value: 'disciplines', label: 'Disciplines' },
      { value: 'consistency', label: 'Consistency' }
    ]
  }
]

Multiple Selection

  

import { ref } from 'vue'

const value = ref([])
const props = { multiple: true }

Select Any Level

Dynamic Loading

  

const props = {
  lazy: true,
  lazyLoad(node, resolve) {
    const { level } = node
    setTimeout(() => {
      const nodes = Array.from({ length: level + 1 }).map((item, i) => ({
        value: `${level}-${i}`,
        label: `Option ${level}-${i}`,
        leaf: level >= 2
      }))
      resolve(nodes)
    }, 1000)
  }
}

Filterable

API Reference

Cascader Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | model-value / v-model | Binding value | string \| number \| array | — | | options | Data of options | CascaderOption[] | — | | props | Configuration options | CascaderProps | — | | size | Size of input | 'large' \| 'default' \| 'small' | — | | placeholder | Placeholder | string | — | | disabled | Whether disabled | boolean | — | | clearable | Whether clearable | boolean | — | | show-all-levels | Display all levels | boolean | true | | collapse-tags | Collapse tags in multiple mode | boolean | — | | separator | Option label separator | string | ' / ' | | filterable | Whether searchable | boolean | — |

CascaderProps

| Name | Description | Type | Default | |------|-------------|------|---------| | expandTrigger | Expand trigger mode | 'click' \| 'hover' | 'click' | | multiple | Enable multiple selection | boolean | false | | checkStrictly | Parent-child independent | boolean | false | | emitPath | Emit path array | boolean | true | | lazy | Enable lazy loading | boolean | false | | lazyLoad | Lazy load method | (node, resolve) => void | — | | value | Value key | string | 'value' | | label | Label key | string | 'label' | | children | Children key | string | 'children' |

Events

| Name | Description | |------|-------------| | change | Value changes | | expand-change | Expand changes | | blur | Blur event | | focus | Focus event |

Best Practices

1. Use checkStrictly for selecting any level
2. Use lazy loading for large datasets
3. Use filterable for searchable cascaders

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.