Cascader 多级联动
规则
js
{
type:"cascader",
title:"所在区域",
field:"address",
value:['陕西省','西安市','新城区'],
props:{
options:[{
value: 'beijing',
label: '北京',
children: [
{
value: 'gugong',
label: '故宫'
},
{
value: 'tiantan',
label: '天坛'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}, {
value: 'jiangsu',
label: '江苏',
children: [
{
value: 'nanjing',
label: '南京',
children: [
{
value: 'fuzimiao',
label: '夫子庙',
}
]
},
{
value: 'suzhou',
label: '苏州',
children: [
{
value: 'zhuozhengyuan',
label: '拙政园',
},
{
value: 'shizilin',
label: '狮子林',
}
]
}
]
}]
}
}
完整配置项:Element_Cascader
value :Array
Props
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
options | 选项的数据源, value 和 label 可以通过 CascaderProps 自定义. | object | — |
props | 配置选项, 请参阅下面 CascaderProps 表。 | object | — |
size | 尺寸 | enum | — |
placeholder | 输入框占位文本 | string | — |
disabled | 是否禁用 | boolean | — |
clearable | 是否支持清空选项 | boolean | — |
showAllLevels | 输入框中是否显示选中值的完整路径 | boolean | true |
collapseTags | 多选模式下是否折叠Tag | boolean | — |
collapseTagsTooltip | 当鼠标悬停于折叠标签的文本时,是否显示所有选中的标签。 要使用此属性,collapse-tags 属性必须设定为 true | boolean | false |
maxCollapseTagsTooltipHeight | collapse tags 的最大高度 | string / number | — |
separator | 用于分隔选项的字符 | string | ' / ' |
filterable | 该选项是否可以被搜索 | boolean | — |
filterMethod | 自定义搜索逻辑,第一个参数是node ,第二个参数是keyword ,返回的布尔值表示是否保留该选项 | Function | — |
debounce | 搜索关键词正在输入时的去抖延迟,单位为毫秒 | number | 300 |
beforeFilter | 过滤函数调用前,所要调用的钩子函数,该函数接收要过滤的值作为参数。 如果该函数的返回值是 false 或者是一个被拒绝的 Promise ,那么接下来的过滤逻辑便不会执行。 | Function | — |
popperClass | 弹出内容的自定义类名 | string | '' |
teleported | 弹层是否使用 teleport | boolean | true |
tagType | 标签类型 | enum | info |
tagEffect | tag effect | enum | light |
validateEvent | 输入时是否触发表单的校验 | boolean | true |
maxCollapseTags | 需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。 | number | 1 |
emptyValues | 组件的空值配置 参考config-provider | array | — |
valueOnClear | 清空选项的值 参考 config-provider | string / number / boolean / Function | — |
persistent | 当下拉框未被激活并且persistent 设置为false ,下拉框容器会被删除。 | boolean | true |
fallbackPlacements | Tooltip 可用的 positions 请查看popper.js 文档 | arrary | — |
placement | 下拉框出现的位置 | enum | bottom-start |
Events
事件名 | 说明 | 类型 |
---|---|---|
change | 当绑定值变化时触发的事件 | Function |
expand-change | 当展开节点发生变化时触发 | Function |
blur | 当失去焦点时触发 | Function |
focus | 当获得焦点时触发 | Function |
clear | 可清空的单选模式下用户点击清空按钮时触发 | Function |
visible-change | 下拉框出现/隐藏时触发 | Function |
remove-tag | 在多选模式下,移除Tag时触发 | Function |
Slots
插槽名 | 说明 | 作用域 |
---|---|---|
default | 自定义备选项的节点内容,分别为当前节点的 Node 对象和数据 | object |
empty | 无匹配选项时的内容 | — |
prefix | 输入框头部内容 | — |
suggestion-item | 搜索时自定义建议项内容 | object |
CascaderProps
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
expandTrigger | 次级菜单的展开方式 | enum | click |
multiple | 是否多选 | boolean | false |
checkStrictly | 是否严格的遵守父子节点不互相关联 | boolean | false |
emitPath | 在选中节点改变时,是否返回由该节点所在的各级菜单的值所组成的数组,若设置 false,则只返回该节点的值 | boolean | true |
lazy | 是否动态加载子节点,需与 lazyLoad 方法结合使用 | boolean | false |
lazyLoad | 加载动态数据的方法,仅在 lazy 为 true 时有效 | Function | — |
value | 指定选项的值为选项对象的某个属性值 | string | value |
label | 指定选项标签为选项对象的某个属性值 | string | label |
children | 指定选项的子选项为选项对象的某个属性值 | string | children |
disabled | 指定选项的禁用为选项对象的某个属性值 | string | disabled |
leaf | 指定选项的叶子节点的标志位为选项对象的某个属性值 | string | leaf |
hoverThreshold | hover 时展开菜单的灵敏度阈值 | number | 500 |