级联选择 Cascader

对应 Arco Cascader：输入框为填充式，面板不显示箭头。 属性用法见 Element Plus 文档。

基础选择

点击输入框逐级选择，可用 clearable 清空。

<script setup lang="ts">
import { ref } from 'vue'
const value = ref<string[]>([])
const options = [
  { value: 'europe', label: 'Europe', children: [{ value: 'london', label: 'London' }, { value: 'paris', label: 'Paris' }] },
  { value: 'asia', label: 'Asia', children: [{ value: 'tokyo', label: 'Tokyo' }] },
  { value: 'other', label: 'Other', disabled: true },
]
</script>

<template>
  <el-cascader v-model="value" :options="options" clearable placeholder="Select a city" style="width: 280px" />
</template>

内联面板

el-cascader-panel 直接展示级联选项，无需打开弹层。

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(['europe', 'london'])
const options = [
  { value: 'europe', label: 'Europe', children: [{ value: 'london', label: 'London' }, { value: 'paris', label: 'Paris' }] },
  { value: 'asia', label: 'Asia', children: [{ value: 'tokyo', label: 'Tokyo' }] },
  { value: 'other', label: 'Other', disabled: true },
]
</script>

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

与 Arco 的差异

• 展开时按已选值展开路径的行为保留 Element Plus。