§ Cascader 级联选择器

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

基础用法

有两种触发子菜单的方式
默认 click 触发子菜单
hover 触发子菜单
显示代码

禁用选项

通过在数据源中设置 disabled 字段来声明该选项是禁用的
显示代码

可清空

通过 clearable 设置输入框可清空
显示代码

仅显示最后一级

可以仅在输入框中显示选中项最后一级的标签,而不是选中项所在的完整路径。
显示代码

多选

可通过 props.multiple = true 来开启多选模式
默认显示所有Tag
折叠展示Tag
显示代码

选择任意一级选项

在单选模式下,你只能选择叶子节点;而在多选模式下,勾选父节点真正选中的都是叶子节点。启用该功能后,可让父子节点取消关联,选择任意一级选项。
单选选择任意一级选项
多选选择任意一级选项
显示代码

动态加载

当选中某一级时,动态加载该级下的选项。
显示代码

可搜索

可以快捷地搜索选项并选择。
单选可搜索
多选可搜索
显示代码

自定义节点内容

可以自定义备选项的节点内容
显示代码

级联面板

级联面板是级联选择器的核心组件,与级联选择器一样,有单选、多选、动态加载等多种功能。
显示代码

Cascader Attributes

Cascader Events

Cascader Methods

Cascader Slots

CascaderPanel Attributes

CascaderPanel Events

CascaderPanel Methods

CascaderPanel Slots

Props

最后更新于: 4/15/2022, 2:41:22 PM