English
FxCascader
About 4596 wordsAbout 15 min
2025-12-16
When a data set has a clear hierarchical structure, use Cascader to view and select it level by level.
Cascader Attributes
| Parameter | Description | Type | Optional Values | Default |
|---|---|---|---|---|
| value / v-model | Bound value of the selected item | - | - | - |
| options | Data source for options. Key names can be configured through the Props property | array | - | - |
| props | Configuration options. See the table below | object | - | - |
| size | Size | string | medium / small / mini | - |
| placeholder | Input placeholder text | string | - | Please select |
| disabled | Whether disabled | boolean | - | false |
| clearable | Whether clearing options is supported | boolean | - | false |
| show-all-levels | Whether to display the full path of the selected value in the input | boolean | - | true |
| collapse-tags | Whether to collapse tags in multiple selection mode | boolean | - | false |
| separator | Option separator | string | - | slash ' / ' |
| filterable | Whether options are searchable; case-sensitive | boolean | - | - |
| filter-method | Custom search logic. The first parameter is node node, and the second is search keyword keyword. Return a Boolean to indicate whether it matches | function(node, keyword) | - | - |
| debounce | Debounce delay for search keyword input, in milliseconds | number | - | 300 |
| before-filter | Hook before filtering. The parameter is the input value. If false is returned, or a returned Promise is rejected, filtering stops | function(value) | - | - |
| popper-class | Custom popover class name | string | - | - |
Cascader Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| change | Triggered when the selected node changes | Value of the selected node |
| expand-change | Triggered when the expanded node changes | Array composed of each parent option value |
| blur | Triggered when focus is lost | (event: Event) |
| focus | Triggered when focus is gained | (event: Event) |
| visible-change | Triggered when the dropdown appears or hides | true when it appears, false when it hides |
| remove-tag | Triggered when a tag is removed in multiple selection mode | Value of the node corresponding to the removed tag |
Cascader Slots
| Name | Description |
|---|---|
| - | Custom node content for options. The parameter is { node, data }, representing the current node object and data respectively |
| trigger | Custom trigger element |
| empty | Content when no matching options exist |
CascaderPanel Attributes
| Parameter | Description | Type | Optional Values | Default |
|---|---|---|---|---|
| value / v-model | Bound value of the selected item | - | - | - |
| options | Data source for options. Key names can be configured through the Props property | array | - | - |
| props | Configuration options. See the table below | object | - | - |
CascaderPanel Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| change | Triggered when the selected node changes | Value of the selected node |
| expand-change | Triggered when the expanded node changes | Array composed of each parent option value |
CascaderPanel Slots
| Name | Description |
|---|---|
| - | Custom node content for options. The parameter is { node, data }, representing the current node object and data respectively |
Props
| Parameter | Description | Type | Optional Values | Default |
|---|---|---|---|---|
| expandTrigger | Expand mode of submenus | string | click / hover | 'click' |
| multiple | Whether multiple selection is enabled | boolean | - | false |
| checkStrictly | Whether to strictly keep parent and child nodes unassociated | boolean | - | false |
| emitPath | When the selected node changes, whether to return an array composed of the values of each menu level containing the node. If set to false, only the node value is returned | boolean | - | true |
| lazy | Whether to dynamically load child nodes; use with the lazyLoad method | boolean | - | false |
| lazyLoad | Method for loading dynamic data; only enabled when lazy is true | function(node, resolve), node is the currently clicked node, and resolve is the callback after data loading completes (must be called) | - | - |
| value | Specifies which property value of the option object is used as the option value | string | - | 'value' |
| label | Specifies which property value of the option object is used as the option label | string | - | 'label' |
| children | Specifies which property value of the option object is used as child options | string | - | 'children' |
| disabled | Specifies which property value of the option object is used as disabled state | string | - | 'disabled' |
| leaf | Specifies which property value of the option object is used as the leaf-node flag | string | - | 'leaf' |
Basic Usage
There are two ways to trigger submenus.
<div class="block">
<span class="demonstration">Default click to trigger submenu</span>
<fx-cascader
ref="demo1"
z-index="10002"
v-model="value"
:options="options"
@expand-change="handleExpandChange"
@visible-change="handVisibleChange"
@change="handleChange"
></fx-cascader>
</div>
<div class="block">
<span class="demonstration">hover to trigger submenu</span>
<fx-cascader
v-model="value"
:options="options"
:props="{ expandTrigger: 'hover' }"
@expand-change="handleExpandChange"
@visible-change="handVisibleChange"
@change="handleChange"
>
<template slot="extra" slot-scope="{nodes}">
<div class="el-cascader-extra" v-if="nodes[0].data.hasExtra">
<a href="javascript:;">View All</a>
</div>
</template>
</fx-cascader>
</div>
<script>
export default {
data() {
return {
list: [1, 2, 3],
value: [],
options1: [],
show: true,
options: [
{
value: "zhinan",
label: "Guide",
children: [
{
value: "shejiyuanze",
label: "Design Principles",
children: [
{
value: "yizhi",
label: "Consistency",
hasExtra: true
},
{
value: "fankui",
label: "Feedback"
},
{
value: "xiaolv",
label: "Efficiency"
},
{
value: "kekong",
label: "Controllability"
}
]
},
{
value: "daohang",
label: "Navigation",
children: [
{
value: "cexiangdaohang",
label: "Side Navigation"
},
{
value: "dingbudaohang",
label: "Top Navigation"
}
]
}
]
},
{
value: "zujian",
label: "Component",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout Layout"
},
{
value: "color",
label: "Color Color"
},
{
value: "typography",
label: "Typography Font"
},
{
value: "icon",
label: "Icon Icon"
},
{
value: "button",
label: "Button Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio Radio"
},
{
value: "checkbox",
label: "Checkbox Checkbox"
},
{
value: "input",
label: "Input Input"
},
{
value: "input-number",
label: "InputNumber InputNumber"
},
{
value: "select",
label: "Select Select"
},
{
value: "cascader",
label: "Cascader Cascader"
},
{
value: "switch",
label: "Switch Switch"
},
{
value: "slider",
label: "Slider Slider"
},
{
value: "time-picker",
label: "TimePicker TimePicker"
},
{
value: "date-picker",
label: "DatePicker DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker DateTimePicker"
},
{
value: "upload",
label: "Upload Upload"
},
{
value: "rate",
label: "Rate Rate"
},
{
value: "form",
label: "Form Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table Table"
},
{
value: "tag",
label: "Tag Label"
},
{
value: "progress",
label: "Progress Progress"
},
{
value: "tree",
label: "Tree Tree"
},
{
value: "pagination",
label: "Pagination Pagination"
},
{
value: "badge",
label: "Badge Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert Warning"
},
{
value: "loading",
label: "Loading Loading"
},
{
value: "message",
label: "Message Message"
},
{
value: "message-box",
label: "MessageBox Popover"
},
{
value: "notification",
label: "Notification Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu Navigation Menu"
},
{
value: "tabs",
label: "Tabs Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown Dropdown Menu"
},
{
value: "steps",
label: "Steps Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog Dialog"
},
{
value: "tooltip",
label: "Tooltip Tooltip"
},
{
value: "popover",
label: "Popover Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel Carousel"
},
{
value: "collapse",
label: "Collapse Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Docs"
}
]
}
]
};
},
methods: {
handleExpandChange(val) {
console.log("handleExpandChange...", val);
},
handVisibleChange(val) {
console.log("handVisibleChange...", val);
},
handleChange(val) {
console.log("handleChange....", val);
}
},
mounted() {
// window.test=this;
}
};
</script>Custom Trigger
<div>
<fx-cascader :options="options" v-model="value" @change="handleChange">
<fx-button type="primary" slot="trigger">Custom Trigger</fx-button>
</fx-cascader>
</div>
<script>
export default {
data() {
return {
value: [],
options: [
{
value: "zhinan",
label: "Guide",
children: [
{
value: "shejiyuanze",
label: "Design Principles",
children: [
{
value: "yizhi",
label: "Consistency"
},
{
value: "fankui",
label: "Feedback"
},
{
value: "xiaolv",
label: "Efficiency"
},
{
value: "kekong",
label: "Controllability"
}
]
},
{
value: "daohang",
label: "Navigation",
children: [
{
value: "cexiangdaohang",
label: "Side Navigation"
},
{
value: "dingbudaohang",
label: "Top Navigation"
}
]
}
]
},
{
value: "zujian",
label: "Component",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout Layout"
},
{
value: "color",
label: "Color Color"
},
{
value: "typography",
label: "Typography Font"
},
{
value: "icon",
label: "Icon Icon"
},
{
value: "button",
label: "Button Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio Radio"
},
{
value: "checkbox",
label: "Checkbox Checkbox"
},
{
value: "input",
label: "Input Input"
},
{
value: "input-number",
label: "InputNumber InputNumber"
},
{
value: "select",
label: "Select Select"
},
{
value: "cascader",
label: "Cascader Cascader"
},
{
value: "switch",
label: "Switch Switch"
},
{
value: "slider",
label: "Slider Slider"
},
{
value: "time-picker",
label: "TimePicker TimePicker"
},
{
value: "date-picker",
label: "DatePicker DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker DateTimePicker"
},
{
value: "upload",
label: "Upload Upload"
},
{
value: "rate",
label: "Rate Rate"
},
{
value: "form",
label: "Form Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table Table"
},
{
value: "tag",
label: "Tag Label"
},
{
value: "progress",
label: "Progress Progress"
},
{
value: "tree",
label: "Tree Tree"
},
{
value: "pagination",
label: "Pagination Pagination"
},
{
value: "badge",
label: "Badge Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert Warning"
},
{
value: "loading",
label: "Loading Loading"
},
{
value: "message",
label: "Message Message"
},
{
value: "message-box",
label: "MessageBox Popover"
},
{
value: "notification",
label: "Notification Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu Navigation Menu"
},
{
value: "tabs",
label: "Tabs Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown Dropdown Menu"
},
{
value: "steps",
label: "Steps Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog Dialog"
},
{
value: "tooltip",
label: "Tooltip Tooltip"
},
{
value: "popover",
label: "Popover Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel Carousel"
},
{
value: "collapse",
label: "Collapse Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Docs"
}
]
}
]
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>Disabled Options
Set the disabled field in the data source to declare that the option is disabled.
<fx-cascader :options="options"></fx-cascader>
<script>
export default {
data() {
return {
options: [
{
value: "zhinan",
label: "Guide",
disabled: true,
children: [
{
value: "shejiyuanze",
label: "Design Principles",
children: [
{
value: "yizhi",
label: "Consistency"
},
{
value: "fankui",
label: "Feedback"
},
{
value: "xiaolv",
label: "Efficiency"
},
{
value: "kekong",
label: "Controllability"
}
]
},
{
value: "daohang",
label: "Navigation",
children: [
{
value: "cexiangdaohang",
label: "Side Navigation"
},
{
value: "dingbudaohang",
label: "Top Navigation"
}
]
}
]
},
{
value: "zujian",
label: "Component",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout Layout"
},
{
value: "color",
label: "Color Color"
},
{
value: "typography",
label: "Typography Font"
},
{
value: "icon",
label: "Icon Icon"
},
{
value: "button",
label: "Button Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio Radio"
},
{
value: "checkbox",
label: "Checkbox Checkbox"
},
{
value: "input",
label: "Input Input"
},
{
value: "input-number",
label: "InputNumber InputNumber"
},
{
value: "select",
label: "Select Select"
},
{
value: "cascader",
label: "Cascader Cascader"
},
{
value: "switch",
label: "Switch Switch"
},
{
value: "slider",
label: "Slider Slider"
},
{
value: "time-picker",
label: "TimePicker TimePicker"
},
{
value: "date-picker",
label: "DatePicker DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker DateTimePicker"
},
{
value: "upload",
label: "Upload Upload"
},
{
value: "rate",
label: "Rate Rate"
},
{
value: "form",
label: "Form Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table Table"
},
{
value: "tag",
label: "Tag Label"
},
{
value: "progress",
label: "Progress Progress"
},
{
value: "tree",
label: "Tree Tree"
},
{
value: "pagination",
label: "Pagination Pagination"
},
{
value: "badge",
label: "Badge Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert Warning"
},
{
value: "loading",
label: "Loading Loading"
},
{
value: "message",
label: "Message Message"
},
{
value: "message-box",
label: "MessageBox Popover"
},
{
value: "notification",
label: "Notification Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu Navigation Menu"
},
{
value: "tabs",
label: "Tabs Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown Dropdown Menu"
},
{
value: "steps",
label: "Steps Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog Dialog"
},
{
value: "tooltip",
label: "Tooltip Tooltip"
},
{
value: "popover",
label: "Popover Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel Carousel"
},
{
value: "collapse",
label: "Collapse Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Docs"
}
]
}
]
};
}
};
</script>Clearable
Set clearable to make the input clearable.
<fx-cascader :options="options" clearable></fx-cascader>
<script>
export default {
data() {
return {
options: [
{
value: "zhinan",
label: "Guide",
children: [
{
value: "shejiyuanze",
label: "Design Principles",
children: [
{
value: "yizhi",
label: "Consistency"
},
{
value: "fankui",
label: "Feedback"
},
{
value: "xiaolv",
label: "Efficiency"
},
{
value: "kekong",
label: "Controllability"
}
]
},
{
value: "daohang",
label: "Navigation",
children: [
{
value: "cexiangdaohang",
label: "Side Navigation"
},
{
value: "dingbudaohang",
label: "Top Navigation"
}
]
}
]
},
{
value: "zujian",
label: "Component",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout Layout"
},
{
value: "color",
label: "Color Color"
},
{
value: "typography",
label: "Typography Font"
},
{
value: "icon",
label: "Icon Icon"
},
{
value: "button",
label: "Button Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio Radio"
},
{
value: "checkbox",
label: "Checkbox Checkbox"
},
{
value: "input",
label: "Input Input"
},
{
value: "input-number",
label: "InputNumber InputNumber"
},
{
value: "select",
label: "Select Select"
},
{
value: "cascader",
label: "Cascader Cascader"
},
{
value: "switch",
label: "Switch Switch"
},
{
value: "slider",
label: "Slider Slider"
},
{
value: "time-picker",
label: "TimePicker TimePicker"
},
{
value: "date-picker",
label: "DatePicker DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker DateTimePicker"
},
{
value: "upload",
label: "Upload Upload"
},
{
value: "rate",
label: "Rate Rate"
},
{
value: "form",
label: "Form Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table Table"
},
{
value: "tag",
label: "Tag Label"
},
{
value: "progress",
label: "Progress Progress"
},
{
value: "tree",
label: "Tree Tree"
},
{
value: "pagination",
label: "Pagination Pagination"
},
{
value: "badge",
label: "Badge Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert Warning"
},
{
value: "loading",
label: "Loading Loading"
},
{
value: "message",
label: "Message Message"
},
{
value: "message-box",
label: "MessageBox Popover"
},
{
value: "notification",
label: "Notification Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu Navigation Menu"
},
{
value: "tabs",
label: "Tabs Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown Dropdown Menu"
},
{
value: "steps",
label: "Steps Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog Dialog"
},
{
value: "tooltip",
label: "Tooltip Tooltip"
},
{
value: "popover",
label: "Popover Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel Carousel"
},
{
value: "collapse",
label: "Collapse Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Docs"
}
]
}
]
};
}
};
</script>Show Only the Last Level
Only the label of the last level of the selected item can be displayed in the input instead of the full path of the selected item.
<fx-cascader :options="options" :show-all-levels="false"></fx-cascader>
<script>
export default {
data() {
return {
options: [
{
value: "zhinan",
label: "Guide",
children: [
{
value: "shejiyuanze",
label: "Design Principles",
children: [
{
value: "yizhi",
label: "Consistency"
},
{
value: "fankui",
label: "Feedback"
},
{
value: "xiaolv",
label: "Efficiency"
},
{
value: "kekong",
label: "Controllability"
}
]
},
{
value: "daohang",
label: "Navigation",
children: [
{
value: "cexiangdaohang",
label: "Side Navigation"
},
{
value: "dingbudaohang",
label: "Top Navigation"
}
]
}
]
},
{
value: "zujian",
label: "Component",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout Layout"
},
{
value: "color",
label: "Color Color"
},
{
value: "typography",
label: "Typography Font"
},
{
value: "icon",
label: "Icon Icon"
},
{
value: "button",
label: "Button Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio Radio"
},
{
value: "checkbox",
label: "Checkbox Checkbox"
},
{
value: "input",
label: "Input Input"
},
{
value: "input-number",
label: "InputNumber InputNumber"
},
{
value: "select",
label: "Select Select"
},
{
value: "cascader",
label: "Cascader Cascader"
},
{
value: "switch",
label: "Switch Switch"
},
{
value: "slider",
label: "Slider Slider"
},
{
value: "time-picker",
label: "TimePicker TimePicker"
},
{
value: "date-picker",
label: "DatePicker DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker DateTimePicker"
},
{
value: "upload",
label: "Upload Upload"
},
{
value: "rate",
label: "Rate Rate"
},
{
value: "form",
label: "Form Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table Table"
},
{
value: "tag",
label: "Tag Label"
},
{
value: "progress",
label: "Progress Progress"
},
{
value: "tree",
label: "Tree Tree"
},
{
value: "pagination",
label: "Pagination Pagination"
},
{
value: "badge",
label: "Badge Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert Warning"
},
{
value: "loading",
label: "Loading Loading"
},
{
value: "message",
label: "Message Message"
},
{
value: "message-box",
label: "MessageBox Popover"
},
{
value: "notification",
label: "Notification Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu Navigation Menu"
},
{
value: "tabs",
label: "Tabs Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown Dropdown Menu"
},
{
value: "steps",
label: "Steps Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog Dialog"
},
{
value: "tooltip",
label: "Tooltip Tooltip"
},
{
value: "popover",
label: "Popover Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel Carousel"
},
{
value: "collapse",
label: "Collapse Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Docs"
}
]
}
]
};
}
};
</script>Multiple Selection
Enable multiple selection mode with props.multiple = true.
<div class="block">
<span class="demonstration">Show all tags by default</span>
<fx-cascader :options="options" :props="props" clearable></fx-cascader>
</div>
<div class="block">
<span class="demonstration">Collapse tags</span>
<fx-cascader
:options="options"
:props="props"
collapse-tags
clearable
></fx-cascader>
</div>
<script>
export default {
data() {
return {
props: { multiple: true },
options: [
{
value: 1,
label: "Southeast",
children: [
{
value: 2,
label: "Shanghai",
children: [
{ value: 3, label: "Putuo" },
{ value: 4, label: "Huangpu" },
{ value: 5, label: "Xuhui" }
]
},
{
value: 7,
label: "Jiangsu",
children: [
{ value: 8, label: "Nanjing" },
{ value: 9, label: "Suzhou" },
{ value: 10, label: "Wuxi" }
]
},
{
value: 12,
label: "Zhejiang",
children: [
{ value: 13, label: "Hangzhou" },
{ value: 14, label: "Ningbo" },
{ value: 15, label: "Jiaxing" }
]
}
]
},
{
value: 17,
label: "Northwest",
children: [
{
value: 18,
label: "Shaanxi",
children: [
{ value: 19, label: "Xi'an" },
{ value: 20, label: "Yan'an" }
]
},
{
value: 21,
label: "Xinjiang Uyghur Autonomous Region",
children: [
{ value: 22, label: "Urumqi" },
{ value: 23, label: "Karamay" }
]
}
]
}
]
};
}
};
</script>Select Any Level Option
In single selection mode, you can only select leaf nodes. In multiple selection mode, checking a parent node actually selects leaf nodes. After enabling this feature, parent-child association can be canceled so any level option can be selected.
<div class="block">
<span class="demonstration">Single selection: select any level option</span>
<fx-cascader
:options="options"
:props="{ checkStrictly: true }"
filterable
:filter-method="filterMethod"
clearable
></fx-cascader>
</div>
<div class="block">
<span class="demonstration">Multiple selection: select any level option</span>
<fx-cascader
:options="options"
:props="{ multiple: true, checkStrictly: true }"
clearable
></fx-cascader>
</div>
<script>
export default {
data() {
return {
options: [
{
value: "zhinan",
label: "Guide",
children: [
{
value: "shejiyuanze",
label: "Design Principles",
children: [
{
value: "yizhi",
label: "Consistency"
},
{
value: "fankui",
label: "Feedback"
},
{
value: "xiaolv",
label: "Efficiency"
},
{
value: "kekong",
label: "Controllability"
}
]
},
{
value: "daohang",
label: "Navigation",
children: [
{
value: "cexiangdaohang",
label: "Side Navigation"
},
{
value: "dingbudaohang",
label: "Top Navigation"
}
]
}
]
},
{
value: "zujian",
label: "Component",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout Layout"
},
{
value: "color",
label: "Color Color"
},
{
value: "typography",
label: "Typography Font"
},
{
value: "icon",
label: "Icon Icon"
},
{
value: "button",
label: "Button Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio Radio"
},
{
value: "checkbox",
label: "Checkbox Checkbox"
},
{
value: "input",
label: "Input Input"
},
{
value: "input-number",
label: "InputNumber InputNumber"
},
{
value: "select",
label: "Select Select"
},
{
value: "cascader",
label: "Cascader Cascader"
},
{
value: "switch",
label: "Switch Switch"
},
{
value: "slider",
label: "Slider Slider"
},
{
value: "time-picker",
label: "TimePicker TimePicker"
},
{
value: "date-picker",
label: "DatePicker DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker DateTimePicker"
},
{
value: "upload",
label: "Upload Upload"
},
{
value: "rate",
label: "Rate Rate"
},
{
value: "form",
label: "Form Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table Table"
},
{
value: "tag",
label: "Tag Label"
},
{
value: "progress",
label: "Progress Progress"
},
{
value: "tree",
label: "Tree Tree"
},
{
value: "pagination",
label: "Pagination Pagination"
},
{
value: "badge",
label: "Badge Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert Warning"
},
{
value: "loading",
label: "Loading Loading"
},
{
value: "message",
label: "Message Message"
},
{
value: "message-box",
label: "MessageBox Popover"
},
{
value: "notification",
label: "Notification Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu Navigation Menu"
},
{
value: "tabs",
label: "Tabs Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown Dropdown Menu"
},
{
value: "steps",
label: "Steps Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog Dialog"
},
{
value: "tooltip",
label: "Tooltip Tooltip"
},
{
value: "popover",
label: "Popover Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel Carousel"
},
{
value: "collapse",
label: "Collapse Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Docs"
}
]
}
]
};
},
methods: {
filterMethod(node, keyword) {
if (node.label == keyword) {
console.log("filterMethod...", node, keyword);
return node;
}
}
}
};
</script>Dynamic Loading
When a level is selected, dynamically load the options under that level.
<fx-cascader
:props="props"
v-model="value"
filterable
@change="onChange"
></fx-cascader>
<script>
let id = 0;
export default {
data() {
return {
value: [1, 2, 4],
props: {
// checkStrictly: true,
lazy: true,
lazyLoad(node, resolve) {
console.log("lazyLoad....", node);
const { level } = node;
setTimeout(() => {
const nodes = Array.from({ length: level + 1 }).map(item => ({
value: ++id,
label: `Option ${id}`,
leaf: level >= 2
}));
// Return child node data by calling resolve, notifying the component that data loading is complete
resolve(nodes);
}, 1000);
}
}
};
},
methods: {
onChange() {
console.log("onChange...", arguments, this.value);
}
}
};
</script>Searchable
Options can be searched and selected quickly.
<div class="block">
<span class="demonstration">Searchable single selection</span>
<fx-cascader
placeholder="Try searching: Guide"
:options="options"
filterable
size="mini"
></fx-cascader>
</div>
<div class="block">
<span class="demonstration">Searchable multiple selection</span>
<fx-cascader
placeholder="Try searching: Guide"
:options="options"
:props="{ multiple: true }"
size="mini"
filterable
></fx-cascader>
</div>
<script>
export default {
data() {
return {
options: [
{
value: "zhinan",
label: "Guide",
children: [
{
value: "shejiyuanze",
label: "Design Principles",
children: [
{
value: "yizhi",
label: "Consistency"
},
{
value: "fankui",
label: "Feedback"
},
{
value: "xiaolv",
label: "Efficiency"
},
{
value: "kekong",
label: "Controllability"
}
]
},
{
value: "daohang",
label: "Navigation",
children: [
{
value: "cexiangdaohang",
label: "Side Navigation"
},
{
value: "dingbudaohang",
label: "Top Navigation"
}
]
}
]
},
{
value: "zujian",
label: "Component",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout Layout"
},
{
value: "color",
label: "Color Color"
},
{
value: "typography",
label: "Typography Font"
},
{
value: "icon",
label: "Icon Icon"
},
{
value: "button",
label: "Button Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio Radio"
},
{
value: "checkbox",
label: "Checkbox Checkbox"
},
{
value: "input",
label: "Input Input"
},
{
value: "input-number",
label: "InputNumber InputNumber"
},
{
value: "select",
label: "Select Select"
},
{
value: "cascader",
label: "Cascader Cascader"
},
{
value: "switch",
label: "Switch Switch"
},
{
value: "slider",
label: "Slider Slider"
},
{
value: "time-picker",
label: "TimePicker TimePicker"
},
{
value: "date-picker",
label: "DatePicker DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker DateTimePicker"
},
{
value: "upload",
label: "Upload Upload"
},
{
value: "rate",
label: "Rate Rate"
},
{
value: "form",
label: "Form Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table Table"
},
{
value: "tag",
label: "Tag Label"
},
{
value: "progress",
label: "Progress Progress"
},
{
value: "tree",
label: "Tree Tree"
},
{
value: "pagination",
label: "Pagination Pagination"
},
{
value: "badge",
label: "Badge Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert Warning"
},
{
value: "loading",
label: "Loading Loading"
},
{
value: "message",
label: "Message Message"
},
{
value: "message-box",
label: "MessageBox Popover"
},
{
value: "notification",
label: "Notification Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu Navigation Menu"
},
{
value: "tabs",
label: "Tabs Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown Dropdown Menu"
},
{
value: "steps",
label: "Steps Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog Dialog"
},
{
value: "tooltip",
label: "Tooltip Tooltip"
},
{
value: "popover",
label: "Popover Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel Carousel"
},
{
value: "collapse",
label: "Collapse Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Docs"
}
]
}
]
};
}
};
</script>Custom Node Content
Option node content can be customized.
<fx-cascader :options="options">
<template slot-scope="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</fx-cascader>
<script>
export default {
data() {
return {
options: [
{
value: "zhinan",
label: "Guide",
children: [
{
value: "shejiyuanze",
label: "Design Principles",
children: [
{
value: "yizhi",
label: "Consistency"
},
{
value: "fankui",
label: "Feedback"
},
{
value: "xiaolv",
label: "Efficiency"
},
{
value: "kekong",
label: "Controllability"
}
]
},
{
value: "daohang",
label: "Navigation",
children: [
{
value: "cexiangdaohang",
label: "Side Navigation"
},
{
value: "dingbudaohang",
label: "Top Navigation"
}
]
}
]
},
{
value: "zujian",
label: "Component",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout Layout"
},
{
value: "color",
label: "Color Color"
},
{
value: "typography",
label: "Typography Font"
},
{
value: "icon",
label: "Icon Icon"
},
{
value: "button",
label: "Button Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio Radio"
},
{
value: "checkbox",
label: "Checkbox Checkbox"
},
{
value: "input",
label: "Input Input"
},
{
value: "input-number",
label: "InputNumber InputNumber"
},
{
value: "select",
label: "Select Select"
},
{
value: "cascader",
label: "Cascader Cascader"
},
{
value: "switch",
label: "Switch Switch"
},
{
value: "slider",
label: "Slider Slider"
},
{
value: "time-picker",
label: "TimePicker TimePicker"
},
{
value: "date-picker",
label: "DatePicker DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker DateTimePicker"
},
{
value: "upload",
label: "Upload Upload"
},
{
value: "rate",
label: "Rate Rate"
},
{
value: "form",
label: "Form Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table Table"
},
{
value: "tag",
label: "Tag Label"
},
{
value: "progress",
label: "Progress Progress"
},
{
value: "tree",
label: "Tree Tree"
},
{
value: "pagination",
label: "Pagination Pagination"
},
{
value: "badge",
label: "Badge Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert Warning"
},
{
value: "loading",
label: "Loading Loading"
},
{
value: "message",
label: "Message Message"
},
{
value: "message-box",
label: "MessageBox Popover"
},
{
value: "notification",
label: "Notification Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu Navigation Menu"
},
{
value: "tabs",
label: "Tabs Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown Dropdown Menu"
},
{
value: "steps",
label: "Steps Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog Dialog"
},
{
value: "tooltip",
label: "Tooltip Tooltip"
},
{
value: "popover",
label: "Popover Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel Carousel"
},
{
value: "collapse",
label: "Collapse Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Docs"
}
]
}
]
};
}
};
</script>Cascader Panel
Cascader Panel is the core component of Cascader. Like Cascader, it supports single selection, multiple selection, dynamic loading, and other features.
<fx-cascader-panel
:options="options"
@expand-change="handleExpandChange"
></fx-cascader-panel>
<script>
export default {
data() {
return {
options: [
{
value: "zhinan",
label: "Guide",
children: [
{
value: "shejiyuanze",
label: "Design Principles",
children: [
{
value: "yizhi",
label: "Consistency"
},
{
value: "fankui",
label: "Feedback"
},
{
value: "xiaolv",
label: "Efficiency"
},
{
value: "kekong",
label: "Controllability"
}
]
},
{
value: "daohang",
label: "Navigation",
children: [
{
value: "cexiangdaohang",
label: "Side Navigation"
},
{
value: "dingbudaohang",
label: "Top Navigation"
}
]
}
]
},
{
value: "zujian",
label: "Component",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout Layout"
},
{
value: "color",
label: "Color Color"
},
{
value: "typography",
label: "Typography Font"
},
{
value: "icon",
label: "Icon Icon"
},
{
value: "button",
label: "Button Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio Radio"
},
{
value: "checkbox",
label: "Checkbox Checkbox"
},
{
value: "input",
label: "Input Input"
},
{
value: "input-number",
label: "InputNumber InputNumber"
},
{
value: "select",
label: "Select Select"
},
{
value: "cascader",
label: "Cascader Cascader"
},
{
value: "switch",
label: "Switch Switch"
},
{
value: "slider",
label: "Slider Slider"
},
{
value: "time-picker",
label: "TimePicker TimePicker"
},
{
value: "date-picker",
label: "DatePicker DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker DateTimePicker"
},
{
value: "upload",
label: "Upload Upload"
},
{
value: "rate",
label: "Rate Rate"
},
{
value: "form",
label: "Form Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table Table"
},
{
value: "tag",
label: "Tag Label"
},
{
value: "progress",
label: "Progress Progress"
},
{
value: "tree",
label: "Tree Tree"
},
{
value: "pagination",
label: "Pagination Pagination"
},
{
value: "badge",
label: "Badge Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert Warning"
},
{
value: "loading",
label: "Loading Loading"
},
{
value: "message",
label: "Message Message"
},
{
value: "message-box",
label: "MessageBox Popover"
},
{
value: "notification",
label: "Notification Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu Navigation Menu"
},
{
value: "tabs",
label: "Tabs Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown Dropdown Menu"
},
{
value: "steps",
label: "Steps Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog Dialog"
},
{
value: "tooltip",
label: "Tooltip Tooltip"
},
{
value: "popover",
label: "Popover Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel Carousel"
},
{
value: "collapse",
label: "Collapse Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Docs"
}
]
}
]
};
},
methods: {
handleExpandChange(val) {
console.log("handleExpandChange...", val);
},
handleChange(val) {
console.log(val);
}
}
};
</script>