Cascader

Rules

Basic Example

const rule = {
    type:"cascader",
    title:"Location",
    field:"address",
    value:['Shaanxi Province','Xi\'an City','Xincheng District'],
    props:{
        options:[{
            value: 'beijing',
            label: 'Beijing',
            children: [
                {
                    value: 'gugong',
                    label: 'Forbidden City'
                },
                {
                    value: 'tiantan',
                    label: 'Temple of Heaven'
                },
                {
                    value: 'wangfujing',
                    label: 'Wangfujing'
                }
            ]
        }, {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
                {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                        {
                            value: 'fuzimiao',
                            label: 'Confucius Temple',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    label: 'Suzhou',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            label: 'Humble Administrator\'s Garden',
                        },
                        {
                            value: 'shizilin',
                            label: 'Lion Grove Garden',
                        }
                    ]
                }
            ]
        }]
    }
}

Props Configuration Examples

Searchable

const rule = {
    type:"cascader",
    title:"Location",
    field:"address",
    props:{
        options:[{
            value: 'beijing',
            label: 'Beijing',
            children: [
                { value: 'gugong', label: 'Forbidden City' },
                { value: 'tiantan', label: 'Temple of Heaven' },
            ]
        }],
        showSearch: true,
        placeholder: "Select or search for an area",
    }
}

Select Any Level

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

Only Display Last Level

const rule = {
    type:"cascader",
    title:"Location",
    field:"address",
    props:{
        options:[{
            value: 'beijing',
            label: 'Beijing',
            children: [
                { value: 'gugong', label: 'Forbidden City' },
            ]
        }],
        displayRender: (labels) => labels[labels.length - 1],
        placeholder: "Select area",
    }
}

Events Examples

Listen to Selection Changes

const rule = {
    type:"cascader",
    title:"Location",
    field:"address",
    props:{
        options:[{
            value: 'beijing',
            label: 'Beijing',
            children: [
                { value: 'gugong', label: 'Forbidden City' },
            ]
        }],
        placeholder: "Select area",
        allowClear: true,
    },
    on: {
        change: (value, selectedOptions) => {
            console.log('Selection value changed:', value, selectedOptions);
        },
        visibleChange: (visible) => {
            console.log('Dropdown display status:', visible);
        },
    },
}

Linkage Update After Selection

const rule = [
    {
        type:"cascader",
        title:"Location",
        field:"address",
        props:{
            options:[{
                value: 'beijing',
                label: 'Beijing',
                children: [
                    { value: 'gugong', label: 'Forbidden City' },
                ]
            }],
            placeholder: "Select area",
        },
        inject: true,
        on: {
            change: ($inject, value, selectedOptions) => {
                // Auto-fill zip code based on selected area
                const zipCodeMap = {
                    'beijing': '100000',
                    'gugong': '100006',
                };
                const lastValue = value[value.length - 1];
                if (zipCodeMap[lastValue]) {
                    $inject.api.setValue('zipCode', zipCodeMap[lastValue]);
                }
            },
        },
    },
    {
        type:"input",
        title:"Zip Code",
        field:"zipCode",
        props: {
            disabled: true,
        },
    },
]

Reference: Ant-design-vue_Cascader

value :Array

Props

Parameter	Description	Type	Default
allowClear	Whether to support clear	boolean	true
autofocus	Auto focus	boolean	false
bordered	Whether to have border	boolean	true
clearIcon	Custom clear icon for selector	slot	-
changeOnSelect	(Effective in single selection) When this is true, clicking each level menu option will change the value, see demo above	boolean	false
defaultValue	Default selected item	string[] | number[]	[]
disabled	Disabled	boolean	false
displayRender	Render function displayed after selection, can use #displayRender="{labels, selectedOptions}"	({labels, selectedOptions}) => VNode	labels => labels.join(' / ')
popupClassName	Custom popup class name	string	-
dropdownStyle	Custom popup style	CSSProperties	{}
expandIcon	Custom expand icon for submenu	slot	-
expandTrigger	Expand method for submenu	click | hover
fieldNames	Custom fields for label value children in options	object	{ label: 'label', value: 'value', children: 'children' }
getPopupContainer	Parent node for menu rendering. Default renders to body. If you encounter menu scroll positioning issues, try changing to scroll area and position relative to it.	Function(triggerNode)	() => document.body
loadData	Used for dynamically loading options, cannot be used with showSearch	(selectedOptions) => void	-
maxTagCount	Maximum number of tags to display, responsive mode will have performance impact	number | responsive	-
maxTagPlaceholder	Content displayed when tags are hidden	v-slot | function(omittedValues)	-
multiple	Support multiple selection nodes	boolean	-
notFoundContent	Content displayed when dropdown list is empty	string | slot	'Not Found'
open	Control popup visibility	boolean	-
options	Data source for options	Option[]	-
placeholder	Input box placeholder text	string	'Select'
placement	Preset position for popup	bottomLeft | bottomRight | topRight	bottomLeft
showCheckedStrategy	Define how selected items are backfilled. Cascader.SHOW_CHILD: Only show selected child nodes. Cascader.SHOW_PARENT: Only show parent node (when all child nodes under parent are selected).	Cascader.SHOW_PARENT | Cascader.SHOW_CHILD	3.3.0
removeIcon	Custom clear icon for multiple selection	slot	-
searchValue	Set search value, needs to be used with showSearch	string	-
showSearch	Display search box in selector	boolean | object	false
status	Set validation status	'error' | 'warning'	-
size	Input box size	large | default | default
suffixIcon	Custom suffix icon for selector	string | VNode | slot	-
tagRender	Custom tag content, effective in multiple selection	slot	-

When showSearch is an object, its fields:

Parameter	Description	Type	Default
filter	Receives inputValue and path as parameters. When path meets filter condition, should return true, otherwise return false.	function(inputValue, path): boolean
limit	Number of search results to display	number | false	50
matchInputWidth	Whether search result list has same width as input box	boolean
render	Used to render filtered options, can use #showSearchRender="{inputValue, path}"	function({inputValue, path}): VNode
sort	Used to sort filtered options	function(a, b, inputValue)

Events

Event Name	Description	Callback Parameters
change	Callback after selection completes	(value, selectedOptions) => void
dropdownVisibleChange	Callback for showing/hiding popup	(value) => void
search	Listen to search, returns input value	(value) => void

Option

interface Option {
  value: string | number;
  label?: any;
  disabled?: boolean;
  children?: Option[];
  // Mark whether it is a leaf node, effective when `loadData` is set
  // When set to `false`, it will force mark as parent node, even if current node has no children, it will show expand icon
  isLeaf?: boolean;
}