UI组件库

# Cascader 级联选择器

基础用法

显示代码

禁用状态

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

可清空

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

选择任意一级选项

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

# Cascader Attributes

参数 说明 类型 可选值 默认值
value / v-model 绑定值 — — —
options 可选项数据源，键名可通过 Props 属性配置 array — —
props 配置选项，具体见下表 object — —
size 尺寸 string medium / small / mini —
placeholder 输入框占位文本 string — 请选择
disabled 是否禁用 boolean — false
clearable 是否支持清空选项 boolean — false
show-all-levels 输入框中是否显示选中值的完整路径 boolean true
name 原生 name 属性 string — —
separator 选项分隔符 string — 斜杠' / '
filterable 是否可搜索选项 boolean — —
filter-method 自定义搜索逻辑，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中 function(node, keyword) — —
debounce 搜索关键词输入的去抖延迟，毫秒 number — 300
before-filter 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 function(value) — —
popper-class 自定义浮层类名 string — —

# Cascader Events

事件名称 说明 回调参数
change 当选中节点变化时触发 选中节点的值
expand-change 当展开节点发生变化时触发 各父级选项值组成的数组
blur 当失去焦点时触发 (event: Event)
focus 当获得焦点时触发 (event: Event)
visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false

# Cascader Methods

方法名 说明 参数
getCheckedNodes 获取选中的节点 (leafOnly) 是否只是叶子节点，默认值为 false

# Cascader Slots

名称 说明
- 自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据
empty 无匹配选项时的内容

# Cascader Slots

名称 说明
- 自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据
empty 无匹配选项时的内容

# Props

参数 说明 类型 可选值 默认值
expandTrigger 次级菜单的展开方式 string click / hover 'click'
checkStrictly 是否严格的遵守父子节点不互相关联 boolean — false
emitPath 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 boolean — true
lazy 是否动态加载子节点，需与 lazyLoad 方法结合使用 — false
lazyLoad 加载动态数据的方法，仅在 lazy 为 true 时有效 function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用) — —
value 指定选项的值为选项对象的某个属性值 string — 'value'
label 指定选项标签为选项对象的某个属性值 string — 'label'
children 指定选项的禁用为选项对象的某个属性值 string — 'children'
disabled 原生 name 属性 string — 'disabled'
leaf 指定选项的叶子节点的标志位为选项对象的某个属性值 string — 'leaf'

← Pagination 分页组件 →