开发预览 更新于 2026-05-10

Cascader 级联选择

多级选项的逐列展开选择器,路径式选取,常用于地区 / 部门 / 分类筛选。

基础用法

options 是一棵树,叶节点点击后选中整条路径;v-model / valuestring[],从根到选中节点的 value 序列。

选中:(无)
<CfCascader v-model="value" :options="options" clearable />
<CfCascader value={value} onChange={setValue} options={options} clearable />

API

属性类型默认值说明
optionsCascaderOption[]级联选项树
value / modelValuestring[]受控选中路径
defaultValuestring[][]非受控初始值
placeholderstring'请选择'未选中时占位文案
separatorstring' / '触发器中显示的路径分隔符
size'sm' | 'md' | 'lg''md'触发器尺寸
disabledbooleanfalse禁用
clearablebooleanfalse显示清除按钮

CascaderOption

字段类型说明
valuestring唯一值
labelstring显示文本
disabledboolean禁用此项
childrenCascaderOption[]下一级选项;省略代表叶节点

事件:onChange(path: string[]) —— 选中路径变化时触发。

反馈与讨论

Cascader 级联选择 的讨论

0
0 / 600
一键发送
正在加载评论...