Cascader 多级联动

规则

基础示例

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

Props 配置示例

三级联动

const rule = {
    type: 'cascader',
    title: '所在区域',
    field: 'address',
    value: '',
    props: {
        title: '选择地址',
        options: [
            {
                text: '浙江省',
                value: '330000',
                children: [
                    {
                        text: '杭州市',
                        value: '330100',
                        children: [
                            {text: '西湖区', value: '330106'},
                            {text: '余杭区', value: '330110'},
                        ]
                    },
                ],
            },
        ],
        placeholder: '请选择区域',
    }
}

自定义字段名

const rule = {
    type: 'cascader',
    title: '商品分类',
    field: 'category',
    value: '',
    props: {
        title: '选择分类',
        options: [
            {
                label: '电子产品',
                id: '1',
                items: [
                    {label: '手机', id: '11'},
                    {label: '电脑', id: '12'},
                ]
            },
        ],
        fieldNames: {
            text: 'label',
            value: 'id',
            children: 'items',
        },
    }
}

Events 事件示例

监听选择变化

const rule = {
    type: 'cascader',
    title: '所在区域',
    field: 'address',
    value: '',
    props: {
        title: '选择地址',
        options: [
            {
                text: '浙江省',
                value: '330000',
                children: [{text: '杭州市', value: '330100'}],
            },
        ],
        placeholder: '请选择',
    },
    on: {
        change: (result) => {
            console.log('选择值改变:', result);
        },
        finish: (result) => {
            console.log('选择完成:', result);
        },
        close: () => {
            console.log('关闭选择器');
        },
    },
}

选择后联动更新

const rule = [
    {
        type: 'cascader',
        title: '所在区域',
        field: 'address',
        value: '',
        props: {
            title: '选择地址',
            options: [
                {
                    text: '浙江省',
                    value: '330000',
                    children: [{text: '杭州市', value: '330100'}],
                },
            ],
        },
        inject: true,
        on: {
            finish: ($inject, result) => {
                // 根据选择的区域，自动填充邮政编码
                const zipCodeMap = {
                    '330000': '310000',
                    '330100': '310000',
                };
                const value = result.value;
                if (zipCodeMap[value]) {
                    $inject.api.setValue('zipCode', zipCodeMap[value]);
                }
            },
        },
    },
    {
        type: 'input',
        title: '邮政编码',
        field: 'zipCode',
        props: {
            disabled: true,
        },
    },
]

完整配置项:Vant_Cascader

value :String|Number

Props

参数	说明	类型	默认值
v-model	选中项的值	string | number	-
title	顶部标题	string	-
options	可选项数据源	CascaderOption[]	[]
placeholder	未选中时的提示文案	string	请选择
disabled	是否禁用输入	boolean	false
active-color	选中状态的高亮颜色	string	#1989fa
swipeable	是否开启手势左右滑动切换	boolean	true
closeable	是否显示关闭图标	boolean	true
show-header	是否展示标题栏	boolean	true
close-icon	关闭图标名称或图片链接，等同于 Icon 组件的 name 属性	string	cross
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