element-plus-cascader

name	element-plus-cascader
description	Element Plus Cascader component (el-cascader) API documentation. Triggers when user wants to use, implement, or asks about el-cascader or Cascader component.

Cascader 组件 API

Cascader Attributes

Name	Description	Type	Default
model-value / v-model	binding value	^[string] / ^[number] /^[array]string[] | number[] | any	—
options	data of the options, the key of value and label can be customize by CascaderProps.	^[array]CascaderOption[]	—
props	configuration options, see the following CascaderProps table.	^[object]CascaderProps	—
size	size of input	^[enum]'large' | 'default' | 'small'	—
placeholder	placeholder of input	^[string]	—
disabled	whether Cascader is disabled	^[boolean]	—
clearable	whether selected value can be cleared	^[boolean]	—
clear-icon ^(2.11.0)	custom clear icon component	^[string] / ^[object]Component	CircleClose
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]	—
collapse-tags-tooltip	whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be true	^[boolean]	false
max-collapse-tags-tooltip-height ^(2.10.2)	max height of collapse-tags tooltip.	^[string] / ^[number]	—
separator	option label separator	^[string]	' / '
filterable	whether the options can be searched	^[boolean]	—
filter-method	customize search logic, the first parameter is node, the second is keyword, and need return a boolean value indicating whether it hits.	^[Function](node: CascaderNode, keyword: string) => boolean	—
debounce	debounce delay when typing filter keyword, in milliseconds	^[number]	300
before-filter	hook 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 aborted	^[Function](value: string) => boolean	—
popper-class	custom class name for Cascader's dropdown and tags' tooltip	^[string]	''
popper-style	custom style for Cascader's dropdown and tags' tooltip	^[string] / ^[object]	—
teleported	whether cascader popup is teleported	^[boolean]	true
effect ^(2.10.5)	tooltip theme, built-in theme: dark / light	^[enum]'dark' | 'light' / ^[string]	light
tag-type	tag type	^[enum]'success' | 'info' | 'warning' | 'danger'	info
tag-effect ^(2.7.8)	tag effect	^[enum]'light' | 'dark' | 'plain'	light
validate-event	whether to trigger form validation	^[boolean]	true
max-collapse-tags ^(2.3.10)	The max tags number to be shown. To use this, collapse-tags must be true	^[number]	1
empty-values ^(2.7.0)	empty values of component, see config-provider	^[array]	—
value-on-clear ^(2.7.0)	clear return value, see config-provider	^[string] / ^[number] / ^[boolean] / ^[Function]	—
persistent ^(2.7.8)	when dropdown is inactive and persistent is false, dropdown will be destroyed	^[boolean]	true
fallback-placements ^(2.8.1)	list of possible positions for Tooltip popper.js	^[array]Placement[]	—
placement ^(2.8.1)	position of dropdown	^[enum]'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'	bottom-start
popper-append-to-body ^(deprecated)	whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false	^[boolean]	true
show-checked-strategy ^(2.10.5)	strategy for displaying checked nodes in multiple selection mode. Use parent when you want things tidy. Use child when every single item matters	^[enum]'parent' | 'child'	child

Cascader Events

Name	Description	Type
change	triggers when the binding value changes	^[Function](value: CascaderValue) => void
expand-change	triggers when expand option changes	^[Function](value: CascaderValue) => void
blur	triggers when Cascader blurs	^[Function](event: FocusEvent) => void
focus	triggers when Cascader focuses	^[Function](event: FocusEvent) => void
clear ^(2.7.7)	triggers when the clear icon is clicked in a clearable Select	^[Function]() => void
visible-change	triggers when the dropdown appears/disappears	^[Function](value: boolean) => void
remove-tag	triggers when remove tag in multiple selection mode	^[Function](value: CascaderNode['valueByOption']) => void

Cascader Slots

Name	Description	Type
default	the custom content of cascader node, which are current Node object and node data respectively.	^[object]{ node: any, data: any }
empty	content when there is no matched options.	—
prefix ^(2.9.4)	content as Input prefix	—
suggestion-item ^(2.9.5)	custom content for suggestion item when searching	^[object]{ item: CascaderNode }
tag ^(2.10.3)	custom tags style	^[object]{ data: Tag[], deleteTag: (tag: Tag) => void }
header ^(2.10.5)	content at the top of the dropdown	—
footer ^(2.10.5)	content at the bottom of the dropdown	—

Cascader Exposes

Name	Description	Type
getCheckedNodes	get an array of currently selected node,(leafOnly) whether only return the leaf checked nodes, default is false	^[Function](leafOnly: boolean) => CascaderNode[] | undefined
cascaderPanelRef	cascader panel ref	^[object]ComputedRef<any>
togglePopperVisible ^(2.2.31)	toggle the visible type of popper	^[Function](visible?: boolean) => void
contentRef	cascader content ref	^[object]ComputedRef<any>
presentText ^(2.8.4)	selected content text	^[object]ComputedRef<string>
focus ^(2.11.8)	focus the input element	^[Function]() => void
blur ^(2.11.8)	blur the input element	^[Function]() => void

CascaderPanel Attributes

Name	Description	Type	Default
model-value / v-model	binding value	^[string]/^[number]/^[array]string[] | number[] | any	—
options	data of the options, the key of value and label can be customize by CascaderProps.	^[array]CascaderOption[]	—
props	configuration options, see the following CascaderProps table.	^[object]CascaderProps	—

CascaderPanel Events

Name	Description	Type
change	triggers when the binding value changes	^[Function](value: CascaderValue | undefined) => void
update:modelValue	triggers when the binding value changes	^[Function](value: CascaderValue | undefined) => void
expand-change	triggers when expand option changes	^[Function](value: CascaderNodePathValue) => void
close	close panel event, provided to Cascader to put away the panel judgment.	^[Function]() => void

CascaderPanel Slots

Name	Description	Type
default	the custom content of cascader node, which are current Node object and node data respectively.	^[object]{ node: any, data: any }
empty ^(2.8.3)	the content of the panel when there is no data.	—

CascaderPanel Exposes

Name	Description	Type
getCheckedNodes	get an array of currently selected node,(leafOnly) whether only return the leaf checked nodes, default is false	^[Function](leafOnly: boolean) => CascaderNode[] | undefined
clearCheckedNodes	clear checked nodes	^[Function]() => void

参考

• 官方文档: https://element-plus.org/en-US/component/cascader.html