Cascader

Rule

Basic Example

const rule = {
    type: 'cascader',
    title: 'Multi-Level Selection',
    field: 'cascader',
    value: '330100',
    props: {
        options: [
            {
                text: 'Zhejiang Province',
                value: '330000',
                children: [{text: 'Hangzhou City', value: '330100'}],
            },
            {
                text: 'Jiangsu Province',
                value: '320000',
                children: [{text: 'Nanjing City', value: '320100'}],
            },
        ],
        placeholder: 'Select',
    }
}

Props Configuration Examples

Three-Level Linkage

const rule = {
    type: 'cascader',
    title: 'Location',
    field: 'address',
    value: '',
    props: {
        title: 'Select Address',
        options: [
            {
                text: 'Zhejiang Province',
                value: '330000',
                children: [
                    {
                        text: 'Hangzhou City',
                        value: '330100',
                        children: [
                            {text: 'Xihu District', value: '330106'},
                            {text: 'Yuhang District', value: '330110'},
                        ]
                    },
                ],
            },
        ],
        placeholder: 'Select area',
    }
}

Custom Field Names

const rule = {
    type: 'cascader',
    title: 'Product Category',
    field: 'category',
    value: '',
    props: {
        title: 'Select Category',
        options: [
            {
                label: 'Electronics',
                id: '1',
                items: [
                    {label: 'Mobile Phone', id: '11'},
                    {label: 'Computer', id: '12'},
                ]
            },
        ],
        fieldNames: {
            text: 'label',
            value: 'id',
            children: 'items',
        },
    }
}

Events Examples

Listen to Selection Changes

const rule = {
    type: 'cascader',
    title: 'Location',
    field: 'address',
    value: '',
    props: {
        title: 'Select Address',
        options: [
            {
                text: 'Zhejiang Province',
                value: '330000',
                children: [{text: 'Hangzhou City', value: '330100'}],
            },
        ],
        placeholder: 'Select',
    },
    on: {
        change: (result) => {
            console.log('Selection changed:', result);
        },
        finish: (result) => {
            console.log('Selection completed:', result);
        },
        close: () => {
            console.log('Selector closed');
        },
    },
}

Linkage Update After Selection

const rule = [
    {
        type: 'cascader',
        title: 'Location',
        field: 'address',
        value: '',
        props: {
            title: 'Select Address',
            options: [
                {
                    text: 'Zhejiang Province',
                    value: '330000',
                    children: [{text: 'Hangzhou City', value: '330100'}],
                },
            ],
        },
        inject: true,
        on: {
            finish: ($inject, result) => {
                // Auto-fill postal code based on selected area
                const zipCodeMap = {
                    '330000': '310000',
                    '330100': '310000',
                };
                const value = result.value;
                if (zipCodeMap[value]) {
                    $inject.api.setValue('zipCode', zipCodeMap[value]);
                }
            },
        },
    },
    {
        type: 'input',
        title: 'Postal Code',
        field: 'zipCode',
        props: {
            disabled: true,
        },
    },
]

Complete configuration items:Vant_Cascader

value :String|Number

Props

Parameter	Description	Type	Default Value
v-model	Selected value	string | number	-
title	Top title	string	-
options	Data source for options	CascaderOption[]	[]
placeholder	Placeholder text when not selected	string	Please select
disabled	Whether to disable input	boolean	false
active-color	Highlight color in selected state	string	#1989fa
swipeable	Whether to enable left-right swipe gesture to switch	boolean	true
closeable	Whether to show close icon	boolean	true
show-header	Whether to show title bar	boolean	true
close-icon	Close icon name or image link, same as Icon component's name attribute	string	cross
field-names	Custom fields in options structure	CascaderFieldNames	{ text: 'text', value: 'value', children: 'children' }

Events

Event	Description	Callback Parameters
change	Triggered when selected item changes	{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number }
finish	Triggered when all options are selected	{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number }
close	Triggered when close icon is clicked	-
click-tab	Triggered when tab is clicked	tabIndex: number, title: string