Skip to content

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选项的数据源, valuelabel 可以通过 CascaderProps 自定义.object
props配置选项, 请参阅下面 CascaderProps 表。object
size尺寸enum
placeholder输入框占位文本string
disabled是否禁用boolean
clearable是否支持清空选项boolean
showAllLevels输入框中是否显示选中值的完整路径booleantrue
collapseTags多选模式下是否折叠Tagboolean
collapseTagsTooltip当鼠标悬停于折叠标签的文本时,是否显示所有选中的标签。 要使用此属性,collapse-tags属性必须设定为 truebooleanfalse
maxCollapseTagsTooltipHeightcollapse tags 的最大高度string / number
separator用于分隔选项的字符string' / '
filterable该选项是否可以被搜索boolean
filterMethod自定义搜索逻辑,第一个参数是node,第二个参数是keyword,返回的布尔值表示是否保留该选项Function
debounce搜索关键词正在输入时的去抖延迟,单位为毫秒number300
beforeFilter过滤函数调用前,所要调用的钩子函数,该函数接收要过滤的值作为参数。 如果该函数的返回值是 false 或者是一个被拒绝的 Promise,那么接下来的过滤逻辑便不会执行。Function
popperClass弹出内容的自定义类名string''
teleported弹层是否使用 teleportbooleantrue
tagType标签类型enuminfo
tagEffecttag effectenumlight
validateEvent输入时是否触发表单的校验booleantrue
maxCollapseTags需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。number1
emptyValues组件的空值配置 参考config-providerarray
valueOnClear清空选项的值 参考 config-providerstring / number / boolean / Function
persistent当下拉框未被激活并且persistent设置为false,下拉框容器会被删除。booleantrue
fallbackPlacementsTooltip 可用的 positions 请查看popper.js 文档arrary
placement下拉框出现的位置enumbottom-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次级菜单的展开方式enumclick
multiple是否多选booleanfalse
checkStrictly是否严格的遵守父子节点不互相关联booleanfalse
emitPath在选中节点改变时,是否返回由该节点所在的各级菜单的值所组成的数组,若设置 false,则只返回该节点的值booleantrue
lazy是否动态加载子节点,需与 lazyLoad 方法结合使用booleanfalse
lazyLoad加载动态数据的方法,仅在 lazy 为 true 时有效Function
value指定选项的值为选项对象的某个属性值stringvalue
label指定选项标签为选项对象的某个属性值stringlabel
children指定选项的子选项为选项对象的某个属性值stringchildren
disabled指定选项的禁用为选项对象的某个属性值stringdisabled
leaf指定选项的叶子节点的标志位为选项对象的某个属性值stringleaf
hoverThresholdhover 时展开菜单的灵敏度阈值number500

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用