Skip to content

Cascader 多级联动

cascader

规则

js
{
    type: 'cascader',
    title: '多级选择',
    field: 'Cascader',
    value: '330100',
    props: {
        options: [
            {
                text: '浙江省',
                value: '330000',
                children: [{text: '杭州市', value: '330100'}],
            },
            {
                text: '江苏省',
                value: '320000',
                children: [{text: '南京市', value: '320100'}],
            },
        ],
        placeholder: '请选择',
    }
}

参考:Vant_Cascader

value :String|Number

Props

参数说明类型默认值
v-model选中项的值string | number-
title顶部标题string-
options可选项数据源CascaderOption[][]
placeholder未选中时的提示文案string请选择
disabled是否禁用输入booleanfalse
active-color选中状态的高亮颜色string#1989fa
swipeable是否开启手势左右滑动切换booleantrue
closeable是否显示关闭图标booleantrue
show-header是否展示标题栏booleantrue
close-icon关闭图标名称或图片链接,等同于 Icon 组件的 name 属性stringcross
field-names自定义 options 结构中的字段CascaderFieldNames{ text: 'text', value: 'value', children: 'children' }

Events

事件说明回调参数
change选中项变化时触发{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number }
finish全部选项选择完成后触发{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number }
close点击关闭图标时触发-
click-tab点击标签时触发tabIndex: number, title: string

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