Cascader Multi-level Linkage
Rules
Basic Example
js
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
js
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' },
]
}],
filterable: true,
placeholder: "Select or search area",
}
}Multiple Selection
js
const rule = {
type:"cascader",
title:"Product Category",
field:"categories",
props:{
options:[{
value: 'electronics',
label: 'Electronics',
children: [
{ value: 'phone', label: 'Phone' },
{ value: 'computer', label: 'Computer' },
]
}],
props: {
multiple: true,
},
collapseTags: true,
placeholder: "Select category",
}
}Select Any Level
js
const rule = {
type:"cascader",
title:"Product Category",
field:"category",
props:{
options:[{
value: 'electronics',
label: 'Electronics',
children: [
{ value: 'phone', label: 'Phone' },
{ value: 'computer', label: 'Computer' },
]
}],
props: {
checkStrictly: true,
},
placeholder: "Select any level",
}
}Show Only Last Level
js
const rule = {
type:"cascader",
title:"Location",
field:"address",
props:{
options:[{
value: 'beijing',
label: 'Beijing',
children: [
{ value: 'gugong', label: 'Forbidden City' },
]
}],
showAllLevels: false,
placeholder: "Select area",
}
}Dynamic Loading
js
const rule = {
type:"cascader",
title:"Product Category",
field:"category",
props:{
props: {
lazy: true,
lazyLoad: (node, resolve) => {
// Dynamically load child node data
const { level } = node;
if (level === 0) {
// Load first level data
resolve([
{ value: '1', label: 'Electronics', leaf: false },
{ value: '2', label: 'Clothing', leaf: false },
]);
} else if (level === 1) {
// Load second level data
resolve([
{ value: '11', label: 'Phone', leaf: true },
{ value: '12', label: 'Computer', leaf: true },
]);
}
},
},
placeholder: "Select category",
}
}Events Examples
Listen to Selection Changes
js
const rule = {
type:"cascader",
title:"Location",
field:"address",
props:{
options:[{
value: 'beijing',
label: 'Beijing',
children: [
{ value: 'gugong', label: 'Forbidden City' },
]
}],
placeholder: "Select area",
clearable: true,
},
on: {
change: (value) => {
console.log('Selection changed:', value);
},
'expand-change': (value) => {
console.log('Expanded node changed:', value);
},
blur: (event) => {
console.log('Lost focus:', event);
},
focus: (event) => {
console.log('Gained focus:', event);
},
clear: () => {
console.log('Cleared selection');
},
'visible-change': (visible) => {
console.log('Dropdown visibility:', visible);
},
},
}Update After Selection
js
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) => {
// 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,
},
},
]Full configuration: Element_Cascader
value :Array
Props
| Attribute Name | Description | Type | Default Value |
|---|---|---|---|
| options | Data source for options. value and label can be customized via CascaderProps. | object | — |
| props | Configuration options. Please refer to the CascaderProps table below. | object | — |
| size | Size | enum | — |
| placeholder | Input placeholder text | string | — |
| disabled | Whether to disable | boolean | — |
| clearable | Whether to support clearing options | boolean | — |
| showAllLevels | Whether to display the full path of selected value in the input box | boolean | true |
| collapseTags | Whether to collapse Tags in multiple selection mode | boolean | — |
| collapseTagsTooltip | Whether to display all selected tags when hovering over collapsed tag text. This property requires collapse-tags to be set to true | boolean | false |
| maxCollapseTagsTooltipHeight | Maximum height of collapse tags | string / number | — |
| separator | Character used to separate options | string | ' / ' |
| filterable | Whether the option can be searched | boolean | — |
| filterMethod | Custom search logic. The first parameter is node, the second parameter is keyword, and the returned boolean indicates whether to keep the option | Function | — |
| debounce | Debounce delay when typing search keywords, in milliseconds | number | 300 |
| beforeFilter | Hook function to call before the filter function is called. This function receives the value to be filtered as a parameter. If the return value of this function is false or a rejected Promise, the subsequent filtering logic will not be executed. | Function | — |
| popperClass | Custom class name for popup content | string | '' |
| teleported | Whether the popup layer uses teleport | boolean | true |
| tagType | Tag type | enum | info |
| tagEffect | Tag effect | enum | light |
| validateEvent | Whether to trigger form validation on input | boolean | true |
| maxCollapseTags | Maximum number of Tags to display. Only takes effect when collapse-tags is set to true. | number | 1 |
| emptyValues | Empty value configuration for the component Refer to config-provider | array | — |
| valueOnClear | Value when clearing options Refer to config-provider | string / number / boolean / Function | — |
| persistent | When the dropdown is not activated and persistent is set to false, the dropdown container will be removed. | boolean | true |
| fallbackPlacements | Available positions for Tooltip. Please refer to popper.js documentation | array | — |
| placement | Position where the dropdown appears | enum | bottom-start |
Events
| Event Name | Description | Type |
|---|---|---|
| change | Event triggered when the bound value changes | Function |
| expand-change | Triggered when expanded nodes change | Function |
| blur | Triggered when losing focus | Function |
| focus | Triggered when gaining focus | Function |
| clear | Triggered when user clicks clear button in clearable single selection mode | Function |
| visible-change | Triggered when dropdown appears/hides | Function |
| remove-tag | Triggered when Tag is removed in multiple selection mode | Function |
Slots
| Slot Name | Description | Scope |
|---|---|---|
| default | Custom node content for options. Parameters are the current node's Node object and data | object |
| empty | Content when no matching options | — |
| prefix | Input box header content | — |
| suggestion-item | Custom suggestion item content when searching | object |
CascaderProps
| Attribute | Description | Type | Default Value |
|---|---|---|---|
| expandTrigger | Expansion method for secondary menu | enum | click |
| multiple | Whether multiple selection is allowed | boolean | false |
| checkStrictly | Whether to strictly follow that parent and child nodes are not mutually associated | boolean | false |
| emitPath | When selected node changes, whether to return an array composed of values from all levels of menus where the node is located. If set to false, only the value of the node is returned | boolean | true |
| lazy | Whether to dynamically load child nodes. Must be used together with lazyLoad method | boolean | false |
| lazyLoad | Method to load dynamic data. Only effective when lazy is true | Function | — |
| value | Specify the value of the option as a property value of the option object | string | value |
| label | Specify the label of the option as a property value of the option object | string | label |
| children | Specify the child options of the option as a property value of the option object | string | children |
| disabled | Specify the disabled state of the option as a property value of the option object | string | disabled |
| leaf | Specify the leaf node flag of the option as a property value of the option object | string | leaf |
| hoverThreshold | Sensitivity threshold for expanding menu on hover | number | 500 |