Cascader

Rules

Basic Example

const rule = {
    type:"cascader",
    title:"Location",
    field:"address",
    value:['Shaanxi Province','Xi\'an City','Xincheng District'],
    props:{}
}

Props Configuration Examples

Searchable Cascader

const rule = {
    type:"cascader",
    title:"Location",
    field:"address",
    value:[],
    props:{
        options: [
            {
                value: 'beijing',
                label: 'Beijing',
                children: [
                    { value: 'chaoyang', label: 'Chaoyang District' },
                    { value: 'haidian', label: 'Haidian District' },
                ]
            },
            {
                value: 'shanghai',
                label: 'Shanghai',
                children: [
                    { value: 'huangpu', label: 'Huangpu District' },
                    { value: 'pudong', label: 'Pudong New Area' },
                ]
            }
        ],
        allowSearch: true,
        placeholder: "Select region",
        allowClear: true,
    }
}

Multiple Selection Cascader

const rule = {
    type:"cascader",
    title:"Product Category",
    field:"categories",
    value:[],
    props:{
        options: [
            {
                value: 'electronics',
                label: 'Electronics',
                children: [
                    { value: 'phone', label: 'Mobile Phone' },
                    { value: 'computer', label: 'Computer' },
                ]
            }
        ],
        multiple: true,
        placeholder: "Select category",
    }
}

Async Load Data

const rule = {
    type:"cascader",
    title:"Location",
    field:"address",
    value:[],
    props:{
        options: [
            {
                value: 'beijing',
                label: 'Beijing',
                isLeaf: false,
            }
        ],
        placeholder: "Select region",
    },
    inject: true,
    on: {
        'load-more': ($inject, option, done) => {
            // Load child data for selected parent
            loadRegionData(option.value).then(res => {
                option.children = res.data.map(item => ({
                    value: item.id,
                    label: item.name,
                    isLeaf: !item.hasChildren
                }));
                done();
            });
        },
    },
}

Events Examples

Handle Selection Changes

const rule = {
    type:"cascader",
    title:"Location",
    field:"address",
    value:[],
    props:{
        options: [
            {
                value: 'beijing',
                label: 'Beijing',
                children: [
                    { value: 'chaoyang', label: 'Chaoyang District' },
                ]
            }
        ],
        placeholder: "Select region",
        allowClear: true,
    },
    on: {
        change: (value, option) => {
            console.log('Selection value changed:', value, option);
        },
        clear: () => {
            console.log('Selection cleared');
        },
        search: (value) => {
            console.log('Search value:', value);
        },
    },
}

Linkage Update After Selection

const rule = [
    {
        type:"cascader",
        title:"Location",
        field:"address",
        value:[],
        props:{
            options: [
                {
                    value: 'beijing',
                    label: 'Beijing',
                    children: [
                        { value: 'chaoyang', label: 'Chaoyang District' },
                    ]
                }
            ],
            placeholder: "Select region",
        },
        inject: true,
        on: {
            change: ($inject, value, option) => {
                // Fill postal code by region
                if (option && option.length > 0) {
                    const postcodeMap = {
                        'chaoyang': '100020',
                        'haidian': '100080',
                    };
                    const lastOption = option[option.length - 1];
                    $inject.api.setValue('postcode', postcodeMap[lastOption.value] || '');
                }
            },
        },
    },
    {
        type:"input",
        field:"postcode",
        title:"Postal Code",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: arco-design_Cascader

value: Array

Props

Parameter	Description	Type	Default	Version
path-mode	Whether bound value is a path	boolean	false
multiple	Whether in multiple selection mode (search is enabled by default in multiple mode)	boolean	false
options	Options for cascader	CascaderOption[]	[]
disabled	Whether disabled	boolean	false
error	Whether in error state	boolean	false
size	Size of select box	'mini' | 'small' | 'medium' | 'large'	'medium'
allow-search	Whether to allow search	boolean	false (single) | true (multiple)
allow-clear	Whether to allow clear	boolean	false
popup-visible (v-model)	Whether to show dropdown	boolean	-
expand-trigger	Trigger method for expanding next level	string	'click'
default-popup-visible	Whether to show dropdown by default (uncontrolled state)	boolean	false
placeholder	Placeholder	string	-
popup-container	Mount container for popup	string | HTMLElement | null | undefined	-
max-tag-count	Maximum number of tags displayed in multiple selection mode. 0 means unlimited	number	0
format-label	Format display content	(options: CascaderOptionInfo[]) => string	-
trigger-props	Trigger properties of dropdown menu	TriggerProps	-
check-strictly	Whether to enable strict selection mode	boolean	false
load-more	Lazy load function, enables lazy loading when provided	( option: CascaderOptionInfo, done: (children?: CascaderOption[]) => void) => void	-	2.13.0
loading	Whether in loading state	boolean	false	2.15.0

Events

Event Name	Description	Parameters
change	Triggered when selected value changes	value: string | string[] | undefined | (string | string[])[]
input-value-change	Triggered when input value changes	value: string
clear	Triggered when clear button is clicked	-
search	Triggered when user searches	value: string
popup-visible-change	Triggered when dropdown display state changes	visible: boolean
focus	Triggered when gains focus	-
blur	Triggered when loses focus	-

CascaderOption

Parameter	Description	Type	Default	Version
value	Option value	`string	number`	-
label	Option text	string	-
render	Custom rendering	RenderFunction	-
disabled	Whether disabled	boolean	false
tagProps	Tag properties for display	TagProps	-	2.8.0
children	Next level options	CascaderOption[]	-
isLeaf	Whether is leaf node	boolean	false