Cascader

Rules

Basic Example

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

Props Configuration Examples

Searchable Cascader

const rule = {
    type:"cascader",
    title:"Region",
    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' },
                ]
            }
        ],
        filterable: true,
        placeholder: "Select region",
        clearable: 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,
        checkStrategy: 'child',
        placeholder: "Select category",
    }
}

Remote Data Loading

const rule = {
    type:"cascader",
    title:"Region",
    field:"address",
    value:[],
    props:{
        remote: true,
        placeholder: "Select region",
    },
    inject: true,
    on: {
        load: ($inject, option) => {
            // Load child data for selected parent
            return new Promise((resolve) => {
                loadRegionData(option.value).then(res => {
                    option.children = res.data.map(item => ({
                        value: item.id,
                        label: item.name
                    }));
                    resolve();
                });
            });
        },
    },
}

Events Examples

Handle Selection Changes

const rule = {
    type:"cascader",
    title:"Region",
    field:"address",
    value:[],
    props:{
        options: [
            {
                value: 'beijing',
                label: 'Beijing',
                children: [
                    { value: 'chaoyang', label: 'Chaoyang District' },
                ]
            }
        ],
        placeholder: "Select region",
        clearable: true,
    },
    on: {
        'update:value': (value, option, pathValues) => {
            console.log('Selection value changed:', value, option, pathValues);
        },
        blur: () => {
            console.log('Lost focus');
        },
        focus: () => {
            console.log('Gained focus');
        },
    },
}

Linkage Update After Selection

const rule = [
    {
        type:"cascader",
        title:"Region",
        field:"address",
        value:[],
        props:{
            options: [
                {
                    value: 'beijing',
                    label: 'Beijing',
                    children: [
                        { value: 'chaoyang', label: 'Chaoyang District' },
                    ]
                }
            ],
            placeholder: "Select region",
        },
        inject: true,
        on: {
            'update:value': ($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: naive-ui_Cascader

value :Array

props

Name	Type	Default Value	Description	Version
cascade	boolean	true	Whether to associate options in multiple selection
check-strategy	string	'all'	Set check strategy to specify displayed checked nodes, all means display all selected nodes; parent means only display parent nodes (when all child nodes under parent node are selected, invalid for single selection); child means only display child nodes;
children-field	string	'children'	Alternative field name for children in CascaderOption
clearable	boolean	false	Whether value can be cleared
disabled	boolean	false	Whether disabled
expand-trigger	'click' | 'hover'	'click'	'hover' does not take effect when remote is set
filterable	boolean	false	Does not take effect when remote is set
filter	(pattern: string, option: CascaderOption, path: CascaderOption[]) => boolean	A string-based filtering algorithm	Function to filter options
value-field	string	'value'	Alternative field name for value in CascaderOption
label-field	string	'label'	Alternative field name for label in CascaderOption
max-tag-count	number | 'responsive'	undefined	Maximum display count of multiple selection tags, responsive will keep all tags in one line
multiple	boolean	false	Whether to support multiple selection
options	CascaderOption[]	[]	Options data
placeholder	string	'Select'	Hint message
placement	'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start'	Popup position	2.25.0
remote	boolean	false	Whether to fetch data remotely
render-label	(option: CascaderOption, checked: boolean) => VNodeChild	undefined	Cascader menu option label rendering function	2.24.0
separator	string	' / '	Data separator
show	boolean	undefined	Whether to open menu
show-path	boolean	true	Whether to display option path in selector
size	'small' | 'medium' | 'large'	'medium'	Size
virtual-scroll	boolean	true	Whether to support virtual scrolling
on-blur	() => void	undefined	Callback executed when user blurs
on-focus	() => void	undefined	Callback executed when user focuses
on-load	(option: CascaderOption) => Promise<void>	undefined	Callback when clicking unloaded node, set option.children in returned promise, loading completes after promise resolve or reject
on-update:show	(value: boolean) => void	undefined	Callback when menu opens/closes
on-update:value	(value: string | number | Array<string | number> | null, option: CascaderOption | Array<CascaderOption | null> | null, pathValues: Array<CascaderOption | null> | Array<CascaderOption[] | null> | null) => void	undefined	Callback executed when value changes