Cascader

If the options have a clear hierarchical structure, Cascader can be used to view and select them.

Basic usage

There are two ways to expand child option items.

Disabled option

Disable an option by setting a disabled field in the option object.

Clearable

Set clearable attribute for el-cascader and a clear icon will appear when selected and hovered

Display only the last level

The input can display only the last level instead of all levels.

Multiple Selection

Set props.multiple = true to use multiple selection.

Select any level of options

In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.

Dynamic loading

Dynamic load its child nodes when checked a node.

Filterable

Search and select options with a keyword.

Custom option content

You can customize the content of cascader node.

Cascader panel

CascaderPanel is the core component of Cascader which has various of features such as single selection, multiple selection, dynamic loading and so on.

Cascader Attributes

AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding value-
optionsdata of the options,the key of value and label can be customize by Props.array
propsconfiguration options, see the following table.object
sizesize of inputstringmedium / small / mini
placeholderplaceholder of inputstringSelect
disabledwhether Cascader is disabledbooleanfalse
clearablewhether selected value can be clearedbooleanfalse
show-all-levelswhether to display all levels of the selected value in the inputbooleantrue
collapse-tagswhether to collapse tags in multiple selection modeboolean-false
separatoroption label separatorstring' / '
filterablewhether the options can be searchedboolean
filter-methodcustomize search logic, the first parameter is node, the second is keyword, and need return a boolean value indicating whether it hits.function(node, keyword)--
debouncedebounce delay when typing filter keyword, in millisecondsnumber300
before-filterhook function before filtering with the value to be filtered as its parameter. If false is returned or a Promise is returned and then is rejected, filtering will be abortedfunction(value)
popper-classcustom class name for Cascader's dropdownstring
popper-append-to-bodywhether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to falseboolean-true

Cascader Events

Event NameDescriptionParameters
changetriggers when the binding value changesvalue
expand-changetriggers when expand option changesan array of the expanding node's parent nodes
blurtriggers when Cascader blurs(event: Event)
focustriggers when Cascader focuses(event: Event)
visible-changetriggers when the dropdown appears/disappearstrue when it appears, and false otherwise
remove-tagtriggers when remove tag in multiple selection modethe value of the tag which is removed

Cascader Methods

Method NameDescriptionParameters
getCheckedNodesget an array of currently selected node(leafOnly) whether only return the leaf checked nodes, default is false

Cascader Slots

NameDescription
-the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively.
emptycontent when there is no matched options.

CascaderPanel Attributes

AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding value-
optionsdata of the options,the key of value and label can be customize by Props.array
propsconfiguration options, see the following table.object

CascaderPanel Events

Event NameDescriptionParameters
changetriggers when the binding value changesvalue
expand-changetriggers when expand option changesan array of the expanding node's parent nodes

CascaderPanel Methods

Method NameDescriptionParameters
getCheckedNodesget an array of currently selected node(leafOnly) whether only return the leaf checked nodes, default is false
clearCheckedNodesclear checked nodes-

CascaderPanel Slots

NameDescription
-the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively.

Props

AttributeDescriptionTypeAccepted ValuesDefault
expandTriggertrigger mode of expanding optionsstringclick / hover'click'
multiplewhether multiple selection is enabledboolean-false
checkStrictlywhether checked state of a node not affects its parent and child nodesboolean-false
emitPathwhen checked nodes change, whether to emit an array of node's path, if false, only emit the value of node.boolean-true
lazywhether to dynamic load child nodes, use with lazyload attributeboolean-false
lazyLoadmethod for loading child nodes data, only works when lazy is truefunction(node, resolve)--
valuespecify which key of node object is used as the node's valuestring'value'
labelspecify which key of node object is used as the node's labelstring'label'
childrenspecify which key of node object is used as the node's childrenstring'children'
disabledspecify which key of node object is used as the node's disabledstring'disabled'
leafspecify which key of node object is used as the node's leaf fieldstring'leaf'