Table of Contents
Cascader
# FxCascader Cascader
When a data collection has a clear hierarchical structure, you can view and select items level by level through a cascader.
# Cascader Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| value / v-model | Binding value | - | — | — |
| options | Data source of options, key names can be configured via Props attribute | array | — | — |
| props | Configuration options, see table below | object | — | — |
| size | Size | string | medium / small / mini | — |
| placeholder | Placeholder text | string | — | Please select |
| disabled | Whether Cascader is disabled | boolean | — | false |
| clearable | Whether selected value can be cleared | boolean | — | false |
| show-all-levels | Whether to display all levels of the selected value in the input | boolean | — | true |
| collapse-tags | Whether to collapse tags in multiple selection mode | boolean | - | false |
| separator | Separator of options | string | — | ' / ' |
| filterable | Whether options can be searched, case-sensitive | boolean | — | — |
| filter-method | Custom search logic, the first parameter is node, the second parameter is keyword, returns a boolean to indicate whether it matches | function(node, keyword) | - | - |
| debounce | Debounce delay when searching, in milliseconds | number | — | 300 |
| before-filter | Hook function before filtering, parameter is the input value, if returns false or returns Promise and is rejected, filtering will be aborted | function(value) | — | — |
| popper-class | Custom class name for Cascader's dropdown | string | — | — |
# Cascader Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| change | Triggers when the selected node changes | Selected node value |
| expand-change | Triggers when expanding node changes | Array of parent node values |
| blur | Triggers when Cascader loses focus | (event: Event) |
| focus | Triggers when Cascader gets focus | (event: Event) |
| visible-change | Triggers when the dropdown appears/disappears | true when it appears, false otherwise |
| remove-tag | Triggers when a tag is removed in multiple selection mode | Value of the removed tag's corresponding node |
# Cascader Slots
| Name | Description |
|---|---|
| - | Custom content for option nodes, parameters are { node, data }, which are the current node's Node object and data |
| trigger | Custom trigger element |
| empty | Content when there are no matching options |
# CascaderPanel Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| value / v-model | Binding value | - | — | — |
| options | Data source of options, key names can be configured via Props attribute | array | — | — |
| props | Configuration options, see table below | object | — | — |
# CascaderPanel Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| change | Triggers when the selected node changes | Selected node value |
| expand-change | Triggers when expanding node changes | Array of parent node values |
# CascaderPanel Slots
| Name | Description |
|---|---|
| - | Custom content for option nodes, parameters are { node, data }, which are the current node's Node object and data |
# Props
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| expandTrigger | How sub-menus are expanded | string | click / hover | 'click' |
| multiple | Whether multiple selection is enabled | boolean | - | false |
| checkStrictly | Whether checked state of a node not affects its parent and child nodes | boolean | - | false |
| emitPath | When a node is selected, whether to return an array containing the values of all levels, if false, only the value of this node is returned | boolean | - | true |
| lazy | Whether to load child nodes dynamically, must be used with lazyLoad method | boolean | - | false |
| lazyLoad | Method for loading dynamic data, only works when lazy is true | function(node, resolve), node is the currently clicked node, resolve is the callback when data loading is complete (must be called) | - | - |
| value | Specify which key of node object is used as the node's value | string | — | 'value' |
| label | Specify which key of node object is used as the node's label | string | — | 'label' |
| children | Specify which key of node object is used as the node's children | string | — | 'children' |
| disabled | Specify which key of node object represents if the node is disabled | string | — | 'disabled' |
| leaf | Specify which key of node object represents if the node is a leaf node | string | — | 'leaf' |
# Basic Usage
There are two ways to trigger sub-menus
Default click to trigger sub-menu
Hover to trigger sub-menu
Simply specify an array of options for the options attribute of Cascader to render a cascader. You can define how sub-menus are expanded via props.expandTrigger.
<div class="block">
<span class="demonstration">Default click to trigger sub-menu</span>
<fx-cascader
ref="demo1"
z-index="10002"
v-model="value"
placeholder="Please select"
:options="options"
@expand-change="handleExpandChange"
@visible-change="handVisibleChange"
@change="handleChange"
></fx-cascader>
</div>
<div class="block">
<span class="demonstration">Hover to trigger sub-menu</span>
<fx-cascader
v-model="value"
placeholder="Please select"
: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: "Components",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout"
},
{
value: "color",
label: "Color"
},
{
value: "typography",
label: "Typography"
},
{
value: "icon",
label: "Icon"
},
{
value: "button",
label: "Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio"
},
{
value: "checkbox",
label: "Checkbox"
},
{
value: "input",
label: "Input"
},
{
value: "input-number",
label: "InputNumber"
},
{
value: "select",
label: "Select"
},
{
value: "cascader",
label: "Cascader"
},
{
value: "switch",
label: "Switch"
},
{
value: "slider",
label: "Slider"
},
{
value: "time-picker",
label: "TimePicker"
},
{
value: "date-picker",
label: "DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker"
},
{
value: "upload",
label: "Upload"
},
{
value: "rate",
label: "Rate"
},
{
value: "form",
label: "Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table"
},
{
value: "tag",
label: "Tag"
},
{
value: "progress",
label: "Progress"
},
{
value: "tree",
label: "Tree"
},
{
value: "pagination",
label: "Pagination"
},
{
value: "badge",
label: "Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert"
},
{
value: "loading",
label: "Loading"
},
{
value: "message",
label: "Message"
},
{
value: "message-box",
label: "MessageBox"
},
{
value: "notification",
label: "Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu"
},
{
value: "tabs",
label: "Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown"
},
{
value: "steps",
label: "Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog"
},
{
value: "tooltip",
label: "Tooltip"
},
{
value: "popover",
label: "Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel"
},
{
value: "collapse",
label: "Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Documentation"
}
]
}
]
};
},
methods: {
handleExpandChange(val) {
console.log("handleExpandChange...", val);
},
handVisibleChange(val) {
console.log("handVisibleChange...", val);
},
handleChange(val) {
console.log("handleChange....", val);
}
},
mounted() {
// window.test=this;
}
};
</script>
Expand Copy Copy
# Custom Trigger
<div>
<fx-cascader :options="options" v-model="value" @change="handleChange" placeholder="Please select">
<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: "Components",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout"
},
{
value: "color",
label: "Color"
},
{
value: "typography",
label: "Typography"
},
{
value: "icon",
label: "Icon"
},
{
value: "button",
label: "Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio"
},
{
value: "checkbox",
label: "Checkbox"
},
{
value: "input",
label: "Input"
},
{
value: "input-number",
label: "InputNumber"
},
{
value: "select",
label: "Select"
},
{
value: "cascader",
label: "Cascader"
},
{
value: "switch",
label: "Switch"
},
{
value: "slider",
label: "Slider"
},
{
value: "time-picker",
label: "TimePicker"
},
{
value: "date-picker",
label: "DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker"
},
{
value: "upload",
label: "Upload"
},
{
value: "rate",
label: "Rate"
},
{
value: "form",
label: "Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table"
},
{
value: "tag",
label: "Tag"
},
{
value: "progress",
label: "Progress"
},
{
value: "tree",
label: "Tree"
},
{
value: "pagination",
label: "Pagination"
},
{
value: "badge",
label: "Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert"
},
{
value: "loading",
label: "Loading"
},
{
value: "message",
label: "Message"
},
{
value: "message-box",
label: "MessageBox"
},
{
value: "notification",
label: "Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu"
},
{
value: "tabs",
label: "Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown"
},
{
value: "steps",
label: "Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog"
},
{
value: "tooltip",
label: "Tooltip"
},
{
value: "popover",
label: "Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel"
},
{
value: "collapse",
label: "Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Documentation"
}
]
}
]
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>
Expand Copy Copy
# Disabled Option
Declare an option as disabled by setting the disabled field in the data source
In this example, the first element in the array specified by options contains the disabled: true key-value pair, so it is disabled. By default, Cascader checks whether the disabled field of each item in the data is true. If the field name in your data that represents disabled is not disabled, you can specify it via the props.disabled attribute (see the API table below). Of course, the three field names value, label, and children can also be specified in the same way.
<fx-cascader :options="options" placeholder="Please select"></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: "Components",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout"
},
{
value: "color",
label: "Color"
},
{
value: "typography",
label: "Typography"
},
{
value: "icon",
label: "Icon"
},
{
value: "button",
label: "Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio"
},
{
value: "checkbox",
label: "Checkbox"
},
{
value: "input",
label: "Input"
},
{
value: "input-number",
label: "InputNumber"
},
{
value: "select",
label: "Select"
},
{
value: "cascader",
label: "Cascader"
},
{
value: "switch",
label: "Switch"
},
{
value: "slider",
label: "Slider"
},
{
value: "time-picker",
label: "TimePicker"
},
{
value: "date-picker",
label: "DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker"
},
{
value: "upload",
label: "Upload"
},
{
value: "rate",
label: "Rate"
},
{
value: "form",
label: "Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table"
},
{
value: "tag",
label: "Tag"
},
{
value: "progress",
label: "Progress"
},
{
value: "tree",
label: "Tree"
},
{
value: "pagination",
label: "Pagination"
},
{
value: "badge",
label: "Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert"
},
{
value: "loading",
label: "Loading"
},
{
value: "message",
label: "Message"
},
{
value: "message-box",
label: "MessageBox"
},
{
value: "notification",
label: "Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu"
},
{
value: "tabs",
label: "Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown"
},
{
value: "steps",
label: "Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog"
},
{
value: "tooltip",
label: "Tooltip"
},
{
value: "popover",
label: "Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel"
},
{
value: "collapse",
label: "Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Documentation"
}
]
}
]
};
}
};
</script>
Expand Copy Copy
# Clearable
Make the input clearable with clearable
<fx-cascader :options="options" clearable placeholder="Please select"></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: "Components",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout"
},
{
value: "color",
label: "Color"
},
{
value: "typography",
label: "Typography"
},
{
value: "icon",
label: "Icon"
},
{
value: "button",
label: "Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio"
},
{
value: "checkbox",
label: "Checkbox"
},
{
value: "input",
label: "Input"
},
{
value: "input-number",
label: "InputNumber"
},
{
value: "select",
label: "Select"
},
{
value: "cascader",
label: "Cascader"
},
{
value: "switch",
label: "Switch"
},
{
value: "slider",
label: "Slider"
},
{
value: "time-picker",
label: "TimePicker"
},
{
value: "date-picker",
label: "DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker"
},
{
value: "upload",
label: "Upload"
},
{
value: "rate",
label: "Rate"
},
{
value: "form",
label: "Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table"
},
{
value: "tag",
label: "Tag"
},
{
value: "progress",
label: "Progress"
},
{
value: "tree",
label: "Tree"
},
{
value: "pagination",
label: "Pagination"
},
{
value: "badge",
label: "Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert"
},
{
value: "loading",
label: "Loading"
},
{
value: "message",
label: "Message"
},
{
value: "message-box",
label: "MessageBox"
},
{
value: "notification",
label: "Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu"
},
{
value: "tabs",
label: "Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown"
},
{
value: "steps",
label: "Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog"
},
{
value: "tooltip",
label: "Tooltip"
},
{
value: "popover",
label: "Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel"
},
{
value: "collapse",
label: "Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Documentation"
}
]
}
]
};
}
};
</script>
Expand Copy Copy
# Show Last Level Only
You can display only the label of the last level of the selected item in the input box, instead of the full path where the selected item is located.
The show-all-levels attribute defines whether to display the full path. Set it to false to show only the last level
<fx-cascader :options="options" :show-all-levels="false" placeholder="Please select"></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: "Components",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout"
},
{
value: "color",
label: "Color"
},
{
value: "typography",
label: "Typography"
},
{
value: "icon",
label: "Icon"
},
{
value: "button",
label: "Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio"
},
{
value: "checkbox",
label: "Checkbox"
},
{
value: "input",
label: "Input"
},
{
value: "input-number",
label: "InputNumber"
},
{
value: "select",
label: "Select"
},
{
value: "cascader",
label: "Cascader"
},
{
value: "switch",
label: "Switch"
},
{
value: "slider",
label: "Slider"
},
{
value: "time-picker",
label: "TimePicker"
},
{
value: "date-picker",
label: "DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker"
},
{
value: "upload",
label: "Upload"
},
{
value: "rate",
label: "Rate"
},
{
value: "form",
label: "Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table"
},
{
value: "tag",
label: "Tag"
},
{
value: "progress",
label: "Progress"
},
{
value: "tree",
label: "Tree"
},
{
value: "pagination",
label: "Pagination"
},
{
value: "badge",
label: "Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert"
},
{
value: "loading",
label: "Loading"
},
{
value: "message",
label: "Message"
},
{
value: "message-box",
label: "MessageBox"
},
{
value: "notification",
label: "Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu"
},
{
value: "tabs",
label: "Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown"
},
{
value: "steps",
label: "Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog"
},
{
value: "tooltip",
label: "Tooltip"
},
{
value: "popover",
label: "Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel"
},
{
value: "collapse",
label: "Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Documentation"
}
]
}
]
};
}
};
</script>
Expand Copy Copy
# Multiple Selection
Enable multiple selection mode by setting props.multiple = true
Display all tags by default
Collapse tags
After enabling multiple selection mode, all selected option tags will be displayed by default. You can use collapse-tags to collapse tags
<div class="block">
<span class="demonstration">Display all tags by default</span>
<fx-cascader :options="options" :props="props" clearable placeholder="Please select"></fx-cascader>
</div>
<div class="block">
<span class="demonstration">Collapse tags</span>
<fx-cascader
:options="options"
:props="props"
collapse-tags
placeholder="Please select"
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 Uygur Autonomous Region",
children: [
{ value: 22, label: "Urumqi" },
{ value: 23, label: "Karamay" }
]
}
]
}
]
};
}
};
</script>
Expand Copy Copy
# Select Any Level
In single selection mode, you can only select leaf nodes; in multiple selection mode, checking a parent node actually selects all leaf nodes. After enabling this feature, parent and child nodes can be unlinked, allowing selection of any level.
Single selection - select any level
Multiple selection - select any level
You can set props.checkStrictly = true to unlink parent and child node selection, thereby achieving the purpose of selecting any level.
<div class="block">
<span class="demonstration">Single selection - select any level</span>
<fx-cascader
:options="options"
:props="{ checkStrictly: true }"
filterable
:filter-method="filterMethod"
placeholder="Please select"
clearable
></fx-cascader>
</div>
<div class="block">
<span class="demonstration">Multiple selection - select any level</span>
<fx-cascader
:options="options"
:props="{ multiple: true, checkStrictly: true }"
placeholder="Please select"
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: "Components",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout"
},
{
value: "color",
label: "Color"
},
{
value: "typography",
label: "Typography"
},
{
value: "icon",
label: "Icon"
},
{
value: "button",
label: "Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio"
},
{
value: "checkbox",
label: "Checkbox"
},
{
value: "input",
label: "Input"
},
{
value: "input-number",
label: "InputNumber"
},
{
value: "select",
label: "Select"
},
{
value: "cascader",
label: "Cascader"
},
{
value: "switch",
label: "Switch"
},
{
value: "slider",
label: "Slider"
},
{
value: "time-picker",
label: "TimePicker"
},
{
value: "date-picker",
label: "DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker"
},
{
value: "upload",
label: "Upload"
},
{
value: "rate",
label: "Rate"
},
{
value: "form",
label: "Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table"
},
{
value: "tag",
label: "Tag"
},
{
value: "progress",
label: "Progress"
},
{
value: "tree",
label: "Tree"
},
{
value: "pagination",
label: "Pagination"
},
{
value: "badge",
label: "Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert"
},
{
value: "loading",
label: "Loading"
},
{
value: "message",
label: "Message"
},
{
value: "message-box",
label: "MessageBox"
},
{
value: "notification",
label: "Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu"
},
{
value: "tabs",
label: "Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown"
},
{
value: "steps",
label: "Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog"
},
{
value: "tooltip",
label: "Tooltip"
},
{
value: "popover",
label: "Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel"
},
{
value: "collapse",
label: "Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Documentation"
}
]
}
]
};
},
methods: {
filterMethod(node, keyword) {
if (node.label == keyword) {
console.log("filterMethod...", node, keyword);
return node;
}
}
}
};
</script>
Expand Copy Copy
# Dynamic Loading
Dynamically load options for a level when it is selected.
Enable dynamic loading via lazy, and set the method for loading data source via lazyload. The lazyload method has two parameters: the first parameter node is the currently clicked node, and the second resolve is the callback when data loading is complete (must be called). To more accurately display the node's state, you can also add a flag to the node data indicating whether it is a leaf node (default field is leaf, which can be modified via props.leaf), otherwise it will simply judge whether it is a leaf node based on whether it has child nodes.
<fx-cascader
:props="props"
v-model="value"
filterable
placeholder="Please select"
@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 to notify the component that data loading is complete
resolve(nodes);
}, 1000);
}
}
};
},
methods: {
onChange() {
console.log("onChange...", arguments, this.value);
}
}
};
</script>
Expand Copy Copy
# Searchable
You can quickly search and select options.
Single selection with search
Multiple selection with search
Set filterable to true to enable the search function. By default, it will match options whose label or all parent nodes' label (determined by show-all-levels) contains the input value. You can also use filter-method to customize the search logic, accepting a function where the first parameter is the node node, the second parameter is the search keyword keyword, and returns a boolean to indicate whether it matches.
<div class="block">
<span class="demonstration">Single selection with search</span>
<fx-cascader
placeholder="Try searching: Guide"
:options="options"
filterable
size="mini"
></fx-cascader>
</div>
<div class="block">
<span class="demonstration">Multiple selection with search</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: "Components",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout"
},
{
value: "color",
label: "Color"
},
{
value: "typography",
label: "Typography"
},
{
value: "icon",
label: "Icon"
},
{
value: "button",
label: "Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio"
},
{
value: "checkbox",
label: "Checkbox"
},
{
value: "input",
label: "Input"
},
{
value: "input-number",
label: "InputNumber"
},
{
value: "select",
label: "Select"
},
{
value: "cascader",
label: "Cascader"
},
{
value: "switch",
label: "Switch"
},
{
value: "slider",
label: "Slider"
},
{
value: "time-picker",
label: "TimePicker"
},
{
value: "date-picker",
label: "DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker"
},
{
value: "upload",
label: "Upload"
},
{
value: "rate",
label: "Rate"
},
{
value: "form",
label: "Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table"
},
{
value: "tag",
label: "Tag"
},
{
value: "progress",
label: "Progress"
},
{
value: "tree",
label: "Tree"
},
{
value: "pagination",
label: "Pagination"
},
{
value: "badge",
label: "Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert"
},
{
value: "loading",
label: "Loading"
},
{
value: "message",
label: "Message"
},
{
value: "message-box",
label: "MessageBox"
},
{
value: "notification",
label: "Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu"
},
{
value: "tabs",
label: "Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown"
},
{
value: "steps",
label: "Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog"
},
{
value: "tooltip",
label: "Tooltip"
},
{
value: "popover",
label: "Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel"
},
{
value: "collapse",
label: "Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Documentation"
}
]
}
]
};
}
};
</script>
Expand Copy Copy
# Custom Node Content
You can customize the content of option nodes
You can customize the content of option nodes in the cascader through scoped slot. The scoped slot will receive two fields node and data, representing the current node's Node object and data respectively.
<fx-cascader :options="options" placeholder="Please select">
<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: "Components",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout"
},
{
value: "color",
label: "Color"
},
{
value: "typography",
label: "Typography"
},
{
value: "icon",
label: "Icon"
},
{
value: "button",
label: "Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio"
},
{
value: "checkbox",
label: "Checkbox"
},
{
value: "input",
label: "Input"
},
{
value: "input-number",
label: "InputNumber"
},
{
value: "select",
label: "Select"
},
{
value: "cascader",
label: "Cascader"
},
{
value: "switch",
label: "Switch"
},
{
value: "slider",
label: "Slider"
},
{
value: "time-picker",
label: "TimePicker"
},
{
value: "date-picker",
label: "DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker"
},
{
value: "upload",
label: "Upload"
},
{
value: "rate",
label: "Rate"
},
{
value: "form",
label: "Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table"
},
{
value: "tag",
label: "Tag"
},
{
value: "progress",
label: "Progress"
},
{
value: "tree",
label: "Tree"
},
{
value: "pagination",
label: "Pagination"
},
{
value: "badge",
label: "Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert"
},
{
value: "loading",
label: "Loading"
},
{
value: "message",
label: "Message"
},
{
value: "message-box",
label: "MessageBox"
},
{
value: "notification",
label: "Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu"
},
{
value: "tabs",
label: "Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown"
},
{
value: "steps",
label: "Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog"
},
{
value: "tooltip",
label: "Tooltip"
},
{
value: "popover",
label: "Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel"
},
{
value: "collapse",
label: "Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Documentation"
}
]
}
]
};
}
};
</script>
Expand Copy Copy
# Cascader Panel
Cascader Panel is the core component of the cascader. Like the cascader, it has various functions such as single selection, multiple selection, and dynamic loading.
Like the cascader, specify options via options, and you can also set functions such as multiple selection and dynamic loading via props. See the API table below for details.
<fx-cascader-panel
:options="options"
placeholder="Please select"
@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: "Components",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout"
},
{
value: "color",
label: "Color"
},
{
value: "typography",
label: "Typography"
},
{
value: "icon",
label: "Icon"
},
{
value: "button",
label: "Button"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio"
},
{
value: "checkbox",
label: "Checkbox"
},
{
value: "input",
label: "Input"
},
{
value: "input-number",
label: "InputNumber"
},
{
value: "select",
label: "Select"
},
{
value: "cascader",
label: "Cascader"
},
{
value: "switch",
label: "Switch"
},
{
value: "slider",
label: "Slider"
},
{
value: "time-picker",
label: "TimePicker"
},
{
value: "date-picker",
label: "DatePicker"
},
{
value: "datetime-picker",
label: "DateTimePicker"
},
{
value: "upload",
label: "Upload"
},
{
value: "rate",
label: "Rate"
},
{
value: "form",
label: "Form"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table"
},
{
value: "tag",
label: "Tag"
},
{
value: "progress",
label: "Progress"
},
{
value: "tree",
label: "Tree"
},
{
value: "pagination",
label: "Pagination"
},
{
value: "badge",
label: "Badge"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert"
},
{
value: "loading",
label: "Loading"
},
{
value: "message",
label: "Message"
},
{
value: "message-box",
label: "MessageBox"
},
{
value: "notification",
label: "Notification"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu"
},
{
value: "tabs",
label: "Tabs"
},
{
value: "breadcrumb",
label: "Breadcrumb"
},
{
value: "dropdown",
label: "Dropdown"
},
{
value: "steps",
label: "Steps"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog"
},
{
value: "tooltip",
label: "Tooltip"
},
{
value: "popover",
label: "Popover"
},
{
value: "card",
label: "Card"
},
{
value: "carousel",
label: "Carousel"
},
{
value: "collapse",
label: "Collapse"
}
]
}
]
},
{
value: "ziyuan",
label: "Resources",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "Component Interaction Documentation"
}
]
}
]
};
},
methods: {
handleExpandChange(val) {
console.log("handleExpandChange...", val);
},
handleChange(val) {
console.log(val);
}
}
};
</script>
Expand Copy Copy