Cascader 级联选择器

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

基础用法

只需为 Cascader 的 options 属性指定选项数组即可渲染出一个级联选择器。

移入触发

通过 expand-trigger 可以定义展开子级菜单的触发方式。

禁用选项

通过在数据源中设置 disabled 字段来禁用选项。

可清空

通过 clearable 设置输入框可清空。

面包屑模式 (Unique)

Fyoimiya UI 特有的面包屑显示模式，在输入框中直接显示路径，视觉上更加清晰。

仅面板模式 (Unique)

可以直接内嵌展示级联面板，适用于文件浏览器等场景。

仅显示最后一级

属性 show-all-levels 定义了是否显示完整的路径，将其赋值为false则仅显示最后一级。

Cascader 属性

属性名	说明	类型	默认值
modelValue / v-model	选中项绑定值	array	-
options	可选项数据源，键名可通过 props 属性配置	array	-
props	配置选项	object	-
size	尺寸	'large' / 'default' / 'small'	'default'
placeholder	输入框占位文本	string	'Please select'
disabled	是否禁用	boolean	false
clearable	是否支持清空选项	boolean	false
show-all-levels	输入框中是否显示选中值的完整路径	boolean	true
separator	选项分隔符	string	' / '
breadcrumb	(Unique) 是否开启面包屑显示模式	boolean	false
panel-only	(Unique) 是否仅显示面板（不带输入框）	boolean	false

Cascader 事件

事件名	说明	回调参数
change	当绑定值变化时触发的事件	(value)
expand-change	当展开节点发生变化时触发的事件	(value)
blur	当失去焦点时触发	(event: FocusEvent)
focus	当获得焦点时触发	(event: FocusEvent)
visible-change	下拉框出现/隐藏时触发	(visible: boolean)
remove-tag	在多选模式下，移除Tag时触发	(removeTagValue)

Cascader Slots

插槽名	说明
default	自定义备选项的节点内容，参数为 '{ node, data }'
empty	无匹配选项时的内容