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: '狮子林',
                        }
                    ]
                }
            ]
        }]
    }
}
{
    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可选项数据源,键名可通过 props 属性配置array
props配置选项,具体见下表object
separator选项分隔符string斜杠'/'
popperClass自定义浮层类名string
placeholder输入框占位文本string请选择
disabled是否禁用booleanfalse
clearable是否支持清空选项booleanfalse
expandTrigger次级菜单的展开方式stringclick / hoverclick
showAllLevels输入框中是否显示选中值的完整路径booleantrue
filterable是否可搜索选项boolean
debounce搜索关键词输入的去抖延迟,毫秒number300
checkStrictly是否严格的遵守父子节点不互相关联booleanfalse
size尺寸stringmedium / small / mini
beforeFilter筛选之前的钩子,参数为输入的值,若返回 false 或者返回 Promise 且被 reject,则停止筛选function(value)

Props.props

参数说明类型可选值默认值
value指定选项的值为选项对象的某个属性值string
label指定选项标签为选项对象的某个属性值string
children指定选项的子选项为选项对象的某个属性值string
disabled指定选项的禁用为选项对象的某个属性值string

Events

事件名称说明回调参数
change当绑定值变化时触发的事件当前值
active-item-change当父级选项变化时触发的事件,仅在 change-on-selectfalse 时可用各父级选项组成的数组
blur在 Cascader 失去焦点时触发(event: Event)
focus在 Cascader 获得焦点时触发(event: Event)
visible-change下拉框出现/隐藏时触发出现则为 true,隐藏则为 false

Released under the MIT License.