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

<template>
  <el-cascader v-model="value" :options="options" />
</template>

<script setup>
import { ref } from 'vue'

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

Multiple Selection

<template>
  <el-cascader v-model="value" :options="options" :props="props" clearable />
</template>

<script setup>
import { ref } from 'vue'

const value = ref([])
const props = { multiple: true }
</script>

Select Any Level

<template>
  <el-cascader v-model="value" :options="options" :props="{ checkStrictly: true }" />
</template>

Dynamic Loading

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

<script setup>
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)
  }
}
</script>

Filterable

<template>
  <el-cascader v-model="value" :options="options" filterable />
</template>

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	—