Cascader 级联选择

用于多层级的选项选择，常见于地区/分类路径选择。支持 hover/click 展开、可搜索、非叶子选择等能力。

基础用法

hover 展开

非叶子选择（change-on-select）

开启后选择过程中即可触发变更，返回当下已选择的路径。

可搜索

输入关键字时显示匹配路径，点击直接选择。

禁用与清空

尺寸

API

属性名	说明	类型	可选值	默认值
modelValue	绑定值（路径键数组）	Array<string | number> | ''	—	''
options	级联选项数据	CascaderOption[]	—	[]
labelField	自定义标签字段名	string	—	'label'
valueField	自定义值字段名	string	—	'value'
childrenField	子节点字段名	string	—	'children'
expandTrigger	展开触发方式	'click' | 'hover'	click / hover	click
changeOnSelect	是否允许选择非叶子节点	boolean	—	false
filterable	是否可搜索	boolean	—	false
showPath	输入框是否显示完整路径	boolean	—	true
placeholder	占位符	string	—	'请选择'
disabled	是否禁用	boolean	—	false
clearable	是否可清空	boolean	—	false
size	输入框尺寸	'large' | 'default' | 'small'	large / default / small	default

事件

事件名	说明	参数类型
update:modelValue	v-model 更新	Array<string | number> | ''
change	选中值变化	同上
clear	点击清空时触发	—
focus	输入框获得焦点	(evt: FocusEvent)
blur	输入框失去焦点	(evt: FocusEvent)
visibleChange	下拉显示状态变化	(visible: boolean)

CascaderOption

export interface CascaderOption {
  label?: string | number
  value?: string | number
  children?: CascaderOption[]
  disabled?: boolean
}