搜索组件...⌘K

Cascader 级联选择

用于从一组相关联的数据集合中进行选择，支持搜索、多选、自定义分隔符等。

基础用法

通过 v-model 绑定选中值数组，options 设置级联数据：

请选择地区

选中：未选择

不同尺寸

设置 size 属性使用三种预设尺寸：

Small

Medium

Large

可清除

设置 clearable 允许清除已选项：

广东 / 广州 / 天河区×

自定义分隔符

设置 separator 改变显示分隔符：

默认斜杠

箭头分隔

短横线

搜索功能

设置 searchable 开启搜索，输入关键词过滤可选项：

可搜索

多选模式

设置 multiple 开启多选，选中值以标签形式展示：

广东 / 广州 / 天河区 ×

选中：gd / gz / th

无边框

设置 borderless 移除触发器边框：

无边框

加载中

设置 loading 显示加载状态：

加载中

禁用选项

在 options 中设置 disabled: true 禁用特定选项：

含禁用项

组合使用

在卡片中结合其他组件构建完整选择场景：

选择省/市/区

Props

参数	类型	默认值	说明
`modelValue`	`any[]`	`[]`	选中值数组（v-model），单选为 [v1,v2,v3]，多选为 [[v1,v2,v3], ...]
`options`	`CascaderOption[]`	`[]`	级联选项数据
`placeholder`	`string`	`'请选择'`	占位文本
`disabled`	`boolean`	`false`	是否禁用
`clearable`	`boolean`	`false`	是否可清除
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`separator`	`string`	`' / '`	显示分隔符
`multiple`	`boolean`	`false`	是否多选
`searchable`	`boolean`	`false`	是否可搜索
`checkStrategy`	`'all' \| 'parent' \| 'child'`	`'child'`	多选勾选策略：child 仅叶子节点，parent 父子联动，all 所有可选
`borderless`	`boolean`	`false`	是否无边框
`loading`	`boolean`	`false`	是否加载中
`error`	`boolean`	`false`	是否错误状态

Events

事件名	类型	说明
`update:modelValue`	`(value: any[]) => void`	选中值变化时触发
`change`	`(value: any[]) => void`	选中值变化时触发
`search`	`(value: string) => void`	搜索关键词变化时触发