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

CascaderProps

Events

Best Practices

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