级联选择

概述

用于从层级树数据中选择值的级联选择组件。它渲染多列联动面板，支持单选/多选、完整路径值模式、父子勾选状态联动、本地过滤与远程搜索、子级懒加载以及大数据量下的虚拟滚动。适用于选项按树形组织且需要逐级选择的场景；扁平选项列表请用 SSelect 或 SCombobox。

用法

特性

🗂 多列联动面板——路径按层级逐列展开
☑️ 单选/多选，父子勾选状态级联（showCheckedStrategy：child / parent）
🛤 完整路径值模式（pathMode）——modelValue 携带完整值/标签路径
⏳ 数据加载——子级懒加载（loadChildren）、防抖远程搜索（searchDelay）、本地过滤（filter）与本地化空态
📜 每列内建虚拟滚动（virtualScroll，itemSize / height 可配）
⌨️ 完整键盘导航——方向键跨列移动、Enter 选择，另支持 click/hover 展开
♿ WAI-ARIA tree 语义——trigger role="combobox" + aria-haspopup="tree"、option role="treeitem"、打开态 axe 零违规
🎨 cascaderVariants 提供 16 个配方插槽与 7 个尺寸变体

演示

Basic

100%

请选择区域

Selected: "None"

Multiple

100%

多选（回填叶子）

多选（父级策略）

Searchable

100%

Selected: None

LazyLoad

100%

懒加载子级

Selected: None

RemoteSearch

100%

Selected: None

VirtualScroll

100%

虚拟滚动（每列 200 项）

Selected: None

CustomOption

100%

自定义选项内容

API

Aria 层

Cascader<T, M, P>

44 属性9 事件6 插槽

属性

属性名	类型	默认值	描述
class	ClassValue	—	cascader 触发器的类
ui	Partial<CascaderUi>	—	该组件的按槽类重写。
size	ThemeSize	—	组件的视觉尺寸。
showArrow	boolean	true	当值为 `true` 时，将显示箭头图标。
placement	import("@/index").Placement	—	内容的位置。
triggerProps	CascaderTriggerProps	—	转发至触发器部分的属性。
valueProps	CascaderValueProps	—	属性将转发至值部分。
searchInputProps	CascaderSearchInputProps	—	已转发至搜索输入部分的属性。
portalProps	PortalProps	—	已将属性转发至门户部分。
contentProps	CascaderContentProps	—	已将属性转发至内容部分。
menuProps	CascaderMenuProps	—	转发至每个菜单部分的属性。
optionProps	Partial<CascaderOptionProps<T>>	—	这些属性将传递给每个选项部分。
emptyProps	CascaderEmptyProps	—	属性转发至空部分。
emptyLabel	string	The locale message	空状态下显示的文本。
clearLabel	string	The locale message	“清除”按钮的无障碍标签。
arrowProps	PopperArrowProps	—	转发给箭头部分的属性。
modelValue	CascaderValueType<T, M, P>	—	所选节点（多个节点）的受控值。可通过 `v-model` 进行绑定。
defaultValue	CascaderValueType<T, M, P>	—	所选节点的默认值。
multiple	M	—	当值为 `true` 时，可选择多个节点。
pathMode	P	false	当值为 `true` 时，模型返回的是完整路径数组，而非节点值。
options	CascaderOptionData<T>[]	—	级联翻译器的选项。
fieldKeys	CascaderFieldKeys	—	用于提取选项字段的字段键。
open	boolean	—	Cascader 的受控打开状态。可绑定为 `v-model:open`。
defaultOpen	boolean	—	cascader 在初始渲染时的展开状态。
disabled	boolean	—	当值为 `true` 时，禁止用户与 Cascader 进行交互。
clearable	boolean	—	当值为 `true` 时，可通过“清除”按钮清除该值。
expandTrigger	'click' \| 'hover'	'click'	用于展开节点子节点的触发器。
checkStrictly	boolean	false	当值为 `false` 时，仅可选择叶节点（单选），或父子检查状态相互关联（多选）。当值为 `true` 时，任何节点均可独立选择。
showCheckedStrategy	'child' \| 'parent'	'child'	在多模式下用于收集和显示已检查节点的策略。 - `child`：收集已检查区域的叶节点。 - `parent`：收集最顶层的已检查节点（将已完全检查的子树折叠到父节点中）。
separator	string	' / '	用于连接路径标签的分隔符。
filterable	boolean	—	当设置为 `true` 时，触发器将变为搜索输入，面板将显示经过过滤的平面结果。
filter	((pattern: string, option: CascaderOptionData<T>, path: string[]) => boolean)	—	本地过滤模式中使用的自定义过滤函数。默认情况下，会对路径中的每个标签执行不区分大小写的 `includes` 匹配。
remote	boolean	—	当设置为 `true` 时，面板将从 `onSearch` 加载其选项，而非进行本地过滤。
onSearch	((pattern: string) => Promise<CascaderOptionData<T>[]>)	—	远程模式下使用的异步搜索函数。返回关键词对应的扁平化选项。
searchDelay	number	300	过滤和远程搜索的防抖延迟（单位：毫秒）。
lazy	boolean	—	当值为 `true` 时，节点的子节点将通过 `onLoad` 异步加载。
onLoad	((option: CascaderNode<T>) => Promise<CascaderOptionData<T>[]>)	—	当 `lazy` 为 `true` 时，用于加载节点子节点的异步函数。
virtualScroll	boolean	—	当值为 `true` 时，仅渲染各列中可见的行。
itemSize	number	34	虚拟滚动所使用的行固定高度。
height	number	204	虚拟滚动所使用的面板高度。
dir	Direction	—	组件的阅读方向。
placeholder	string	—	未选中任何节点时显示的内容。
name	string	—	字段的名称。作为名称/值对的一部分，与其所属表单一同提交。
required	boolean	—	当值为 `true` 时，表示用户必须先设置该值，所属表单才能提交。

事件

事件名	参数	描述
update:modelValue	CascaderValueType<T, M, P>	当级联组件的值发生变化时，会调用该事件处理程序。可作为 `v-model` 进行绑定。
update:open	boolean	当级联器的打开状态发生变化时，会调用此事件处理程序。可作为 `v-model:open` 进行绑定。
change	CascaderValueType<T, M, P> \| undefined, nodes: CascaderNode<T>[]	当值发生变化时，会调用该事件处理程序，并传入所选节点。
clear	—	当选区被清除时调用的事件处理程序。
loaded	CascaderNode<T>	当节点的子节点加载完成时（懒加载模式）调用的事件处理程序。
closeAutoFocus	Event	在关闭自动聚焦时触发。
escapeKeyDown	KeyboardEvent	当 Esc 键被按下时触发的事件处理程序。可被阻止。
pointerDownOutside	PointerDownOutsideEvent	当 `pointerdown` 事件发生在 `DismissableLayer` 外部时调用的事件处理程序。可被阻止。
placed	—	在内容被放置时生成。

插槽

插槽名	参数	描述
trigger-icon	—	触发图标（箭头）的自定义内容。
trigger-value	CascaderCompactTriggerValueSlotProps<T, M, P>	触发值的自定义内容。
search-input	—	搜索输入的自定义内容。
option	CascaderCompactOptionSlotProps<T>	针对单个选项的自定义内容。
tag	CascaderCompactTagSlotProps<T>	多模式下某个标签的自定义内容。
empty	—	针对空状态的自定义内容。

CascaderArrow

CascaderClear

1 属性

属性

属性名	类型	默认值	描述
ariaLabel	string	'清除'	“清除”按钮的无障碍标签。

CascaderCompact<T, M, P>

41 属性9 事件6 插槽

属性

属性名	类型	默认值	描述
showArrow	boolean	true	当值为 `true` 时，将显示箭头图标。
placement	import("@/index").Placement	—	内容的位置。
triggerProps	CascaderTriggerProps	—	转发至触发器部分的属性。
valueProps	CascaderValueProps	—	属性将转发至值部分。
searchInputProps	CascaderSearchInputProps	—	已转发至搜索输入部分的属性。
portalProps	PortalProps	—	已将属性转发至门户部分。
contentProps	CascaderContentProps	—	已将属性转发至内容部分。
menuProps	CascaderMenuProps	—	转发至每个菜单部分的属性。
optionProps	Partial<CascaderOptionProps<T>>	—	这些属性将传递给每个选项部分。
emptyProps	CascaderEmptyProps	—	属性转发至空部分。
emptyLabel	string	The locale message	空状态下显示的文本。
clearLabel	string	The locale message	“清除”按钮的无障碍标签。
arrowProps	PopperArrowProps	—	转发给箭头部分的属性。
modelValue	CascaderValueType<T, M, P>	—	所选节点（多个节点）的受控值。可通过 `v-model` 进行绑定。
defaultValue	CascaderValueType<T, M, P>	—	所选节点的默认值。
multiple	M	—	当值为 `true` 时，可选择多个节点。
pathMode	P	false	当值为 `true` 时，模型返回的是完整路径数组，而非节点值。
options	CascaderOptionData<T>[]	—	级联翻译器的选项。
fieldKeys	CascaderFieldKeys	—	用于提取选项字段的字段键。
open	boolean	—	Cascader 的受控打开状态。可绑定为 `v-model:open`。
defaultOpen	boolean	—	cascader 在初始渲染时的展开状态。
disabled	boolean	—	当值为 `true` 时，禁止用户与 Cascader 进行交互。
clearable	boolean	—	当值为 `true` 时，可通过“清除”按钮清除该值。
expandTrigger	'click' \| 'hover'	'click'	用于展开节点子节点的触发器。
checkStrictly	boolean	false	当值为 `false` 时，仅可选择叶节点（单选），或父子检查状态相互关联（多选）。当值为 `true` 时，任何节点均可独立选择。
showCheckedStrategy	'child' \| 'parent'	'child'	在多模式下用于收集和显示已检查节点的策略。 - `child`：收集已检查区域的叶节点。 - `parent`：收集最顶层的已检查节点（将已完全检查的子树折叠到父节点中）。
separator	string	' / '	用于连接路径标签的分隔符。
filterable	boolean	—	当设置为 `true` 时，触发器将变为搜索输入，面板将显示经过过滤的平面结果。
filter	((pattern: string, option: CascaderOptionData<T>, path: string[]) => boolean)	—	本地过滤模式中使用的自定义过滤函数。默认情况下，会对路径中的每个标签执行不区分大小写的 `includes` 匹配。
remote	boolean	—	当设置为 `true` 时，面板将从 `onSearch` 加载其选项，而非进行本地过滤。
onSearch	((pattern: string) => Promise<CascaderOptionData<T>[]>)	—	远程模式下使用的异步搜索函数。返回关键词对应的扁平化选项。
searchDelay	number	300	过滤和远程搜索的防抖延迟（单位：毫秒）。
lazy	boolean	—	当值为 `true` 时，节点的子节点将通过 `onLoad` 异步加载。
onLoad	((option: CascaderNode<T>) => Promise<CascaderOptionData<T>[]>)	—	当 `lazy` 为 `true` 时，用于加载节点子节点的异步函数。
virtualScroll	boolean	—	当值为 `true` 时，仅渲染各列中可见的行。
itemSize	number	34	虚拟滚动所使用的行固定高度。
height	number	204	虚拟滚动所使用的面板高度。
dir	Direction	—	组件的阅读方向。
placeholder	string	—	未选中任何节点时显示的内容。
name	string	—	字段的名称。作为名称/值对的一部分，与其所属表单一同提交。
required	boolean	—	当值为 `true` 时，表示用户必须先设置该值，所属表单才能提交。

事件

事件名	参数	描述
update:modelValue	CascaderValueType<T, M, P>	当级联组件的值发生变化时，会调用该事件处理程序。可作为 `v-model` 进行绑定。
update:open	boolean	当级联器的打开状态发生变化时，会调用此事件处理程序。可作为 `v-model:open` 进行绑定。
change	CascaderValueType<T, M, P> \| undefined, nodes: CascaderNode<T>[]	当值发生变化时，会调用该事件处理程序，并传入所选节点。
clear	—	当选区被清除时调用的事件处理程序。
loaded	CascaderNode<T>	当节点的子节点加载完成时（懒加载模式）调用的事件处理程序。
closeAutoFocus	Event	在关闭自动聚焦时触发。
escapeKeyDown	KeyboardEvent	当 Esc 键被按下时触发的事件处理程序。可被阻止。
pointerDownOutside	PointerDownOutsideEvent	当 `pointerdown` 事件发生在 `DismissableLayer` 外部时调用的事件处理程序。可被阻止。
placed	—	在内容被放置时生成。

插槽

插槽名	参数	描述
trigger-icon	—	触发图标（箭头）的自定义内容。
trigger-value	CascaderCompactTriggerValueSlotProps<T, M, P>	触发值的自定义内容。
search-input	—	搜索输入的自定义内容。
option	CascaderCompactOptionSlotProps<T>	针对单个选项的自定义内容。
tag	CascaderCompactTagSlotProps<T>	多模式下某个标签的自定义内容。
empty	—	针对空状态的自定义内容。

CascaderCompactOption

CascaderCompactTag

CascaderCompactTriggerValue

CascaderContent

24 属性4 事件

属性

属性名	类型	默认值	描述
menuProps	CascaderMenuProps	—	转发至每个菜单部分的属性。
emptyProps	CascaderEmptyProps	—	属性转发至空部分。
open	boolean	true	浮动层是否处于打开状态。该状态驱动定位生命周期（当打开状态切换时，`isPositioned` 会重置）；定位原语本身没有打开状态，因此调用方需在此处自行处理打开状态。
placement	Placement	undefined	浮动元素的位置。若使用该属性，它将覆盖 `side` 和 `align` 属性。
side	Side	'bottom'	打开时优先渲染的锚点侧。当发生冲突且启用了 avoidCollisions 时，该侧将反转。
sideOffset	number	0	距锚点的像素距离。
sideFlip	boolean	true	遇到边界时，请翻转至另一侧。
align	Align	'center'	首选与锚点对齐。发生冲突时可能会调整对齐方式。
alignOffset	number	0	相对于 `start` 或 `end` 对齐选项的像素偏移量。
alignFlip	boolean	true	当与边界发生冲突时，翻转对齐方式。此情况仅在 `prioritizePosition` 为 true 时才会发生。
avoidCollisions	boolean	true	当值为 `true` 时，将覆盖“侧边”和“对齐”首选项，以避免与边界边缘发生冲突。
collisionBoundary	Element \| (Element \| null)[] \| null	[ ]	用作碰撞边界的元素。默认情况下，该边界为视口，但您可以提供额外的元素以纳入此检查范围。
collisionPadding	Padding	0	从边界边缘开始，碰撞检测应发生的距离（以像素为单位）。接受一个数字（所有边均相同），或一个部分填充对象，例如：{ top: 20, left: 20 }。
arrowPadding	number	0	箭头与内容边缘之间的间距。如果您的内容使用了 border-radius，这将防止内容溢出到角落。
hideShiftedArrow	boolean	false	当值为 `true` 时，若无法将箭头居中对齐到引用元素上，则隐藏该箭头。
sticky	'partial' \| 'always'	'partial'	在对齐轴上的“粘附”行为。`partial` 会在锚点至少部分位于边界内时将内容保留在边界内，而 “always” 则无论如何都会将内容保留在边界内。
hideWhenDetached	boolean	false	当锚点被完全遮挡时，是否隐藏内容。
positionStrategy	'fixed' \| 'absolute'	'fixed'	要使用的 CSS `position` 属性的类型。
updatePositionStrategy	'always' \| 'optimized'	'optimized'	在每个动画帧中更新浮动元素位置的策略。
disableUpdateOnLayoutShift	boolean	false	当布局发生变化时，是否禁用内容的更新位置。
prioritizePosition	boolean	false	强制内容位于视口内。可能会与参考元素重叠，这可能并非预期效果。
reference	ReferenceElement	—	将作为浮动元素定位参考点的自定义元素或虚拟元素。如果提供了该元素，它将替换默认的锚点元素。
disableOutsidePointerEvents	boolean	—	当值为 `true` 时，`DismissableLayer` 外部元素的悬停/聚焦/点击交互将被禁用。用户需要双击外部元素才能与其交互：第一次用于关闭 `DismissableLayer`，第二次用于触发该元素。
forceMount	boolean	—	用于在需要更多控制时强制挂载。在使用 Vue 动画库控制动画时非常有用。

事件

事件名	参数	描述
closeAutoFocus	Event	在关闭自动聚焦时触发。
escapeKeyDown	KeyboardEvent	当 Esc 键被按下时触发的事件处理程序。可被阻止。
pointerDownOutside	PointerDownOutsideEvent	当 `pointerdown` 事件发生在 `DismissableLayer` 外部时调用的事件处理程序。可被阻止。
placed	—	在内容被放置时生成。

CascaderEmpty

CascaderMenu

2 属性

属性

属性名	类型	默认值	描述
level	number	—	菜单列的层级深度。
optionProps	Partial<CascaderOptionProps<DefinedValue>>	—	这些属性将传递给每个选项部分。

CascaderOption<T>

5 属性2 事件

属性

属性名	类型	默认值	描述
node	CascaderNode<T extends DefinedValue = DefinedValue>	—	该选项渲染的节点。
index	number	—	节点在其列中的位置。
level	number	—	该选项所属列的深度。
asChild	boolean	—	将默认渲染元素替换为作为子元素传递的元素，并合并两者的属性及行为。
as	AsTag \| Component	'div'	该组件应渲染为的元素或组件。可通过 `asChild` 进行覆盖。

事件

事件名	参数	描述
select	CascaderSelectEvent<T>	当节点被选中时调用的事件处理程序。可通过调用 `event.preventDefault` 来阻止该事件。
expand	CascaderExpandEvent<T>	当节点展开时触发的事件处理程序。可通过调用 `event.preventDefault` 阻止该事件。

CascaderPortal

4 属性

属性

属性名	类型	默认值	描述
to	string \| HTMLElement	—	Vue 原生 teleport 组件属性 `:to` {@link https://vuejs.org/guide/built-ins/teleport.html#basic-usage}
disabled	boolean	—	禁用“teleport”功能，并将组件内联渲染 {@link https://vuejs.org/guide/built-ins/teleport.html#disabling-teleport}
defer	boolean	—	将 Teleport 目标的解析推迟到应用程序的其他部分加载完成后（需要 Vue 3.5.0 及以上版本） {@link https://vuejs.org/guide/built-ins/teleport.html#deferred-teleport}
forceMount	boolean	—	用于在需要更多控制时强制挂载。在使用 Vue 动画库控制动画时非常有用。

CascaderRoot<T, M, P>

28 属性5 事件

属性

属性名	类型	默认值	描述
modelValue	CascaderValueType<T, M, P>	—	所选节点（多个节点）的受控值。可通过 `v-model` 进行绑定。
defaultValue	CascaderValueType<T, M, P>	—	所选节点的默认值。
multiple	M	—	当值为 `true` 时，可选择多个节点。
pathMode	P	false	当值为 `true` 时，模型返回的是完整路径数组，而非节点值。
options	CascaderOptionData<T>[]	—	级联翻译器的选项。
fieldKeys	CascaderFieldKeys	—	用于提取选项字段的字段键。
open	boolean	—	Cascader 的受控打开状态。可绑定为 `v-model:open`。
defaultOpen	boolean	—	cascader 在初始渲染时的展开状态。
disabled	boolean	—	当值为 `true` 时，禁止用户与 Cascader 进行交互。
clearable	boolean	—	当值为 `true` 时，可通过“清除”按钮清除该值。
expandTrigger	'click' \| 'hover'	'click'	用于展开节点子节点的触发器。
checkStrictly	boolean	false	当值为 `false` 时，仅可选择叶节点（单选），或父子检查状态相互关联（多选）。当值为 `true` 时，任何节点均可独立选择。
showCheckedStrategy	'child' \| 'parent'	'child'	在多模式下用于收集和显示已检查节点的策略。 - `child`：收集已检查区域的叶节点。 - `parent`：收集最顶层的已检查节点（将已完全检查的子树折叠到父节点中）。
separator	string	' / '	用于连接路径标签的分隔符。
filterable	boolean	—	当设置为 `true` 时，触发器将变为搜索输入，面板将显示经过过滤的平面结果。
filter	((pattern: string, option: CascaderOptionData<T>, path: string[]) => boolean)	—	本地过滤模式中使用的自定义过滤函数。默认情况下，会对路径中的每个标签执行不区分大小写的 `includes` 匹配。
remote	boolean	—	当设置为 `true` 时，面板将从 `onSearch` 加载其选项，而非进行本地过滤。
onSearch	((pattern: string) => Promise<CascaderOptionData<T>[]>)	—	远程模式下使用的异步搜索函数。返回关键词对应的扁平化选项。
searchDelay	number	300	过滤和远程搜索的防抖延迟（单位：毫秒）。
lazy	boolean	—	当值为 `true` 时，节点的子节点将通过 `onLoad` 异步加载。
onLoad	((option: CascaderNode<T>) => Promise<CascaderOptionData<T>[]>)	—	当 `lazy` 为 `true` 时，用于加载节点子节点的异步函数。
virtualScroll	boolean	—	当值为 `true` 时，仅渲染各列中可见的行。
itemSize	number	34	虚拟滚动所使用的行固定高度。
height	number	204	虚拟滚动所使用的面板高度。
dir	Direction	—	组件的阅读方向。
placeholder	string	—	未选中任何节点时显示的内容。
name	string	—	字段的名称。作为名称/值对的一部分，与其所属表单一同提交。
required	boolean	—	当值为 `true` 时，表示用户必须先设置该值，所属表单才能提交。

事件

事件名	参数	描述
update:modelValue	CascaderValueType<T, M, P>	当级联组件的值发生变化时，会调用该事件处理程序。可作为 `v-model` 进行绑定。
update:open	boolean	当级联器的打开状态发生变化时，会调用此事件处理程序。可作为 `v-model:open` 进行绑定。
change	CascaderValueType<T, M, P> \| undefined, nodes: CascaderNode<T>[]	当值发生变化时，会调用该事件处理程序，并传入所选节点。
clear	—	当选区被清除时调用的事件处理程序。
loaded	CascaderNode<T>	当节点的子节点加载完成时（懒加载模式）调用的事件处理程序。

CascaderSearchInput

CascaderTags

2 插槽

插槽

插槽名	参数	描述
tag	CascaderCompactTagSlotProps<T>	多模式下针对单个标签的自定义内容。
value	—	当未选中任何内容时显示的自定义内容。

CascaderTrigger

4 属性

属性

属性名	类型	默认值	描述
disabled	boolean	—	当值为 `true` 时，禁止用户与触发器进行交互。
reference	ReferenceElement	—	—
asChild	boolean	—	将默认渲染元素替换为作为子元素传递的元素，并合并两者的属性及行为。
as	AsTag \| Component	'div'	该组件应渲染为的元素或组件。可通过 `asChild` 进行覆盖。

CascaderValue

1 属性

属性

属性名	类型	默认值	描述
placeholder	string	—	未选中任何节点时显示的内容。

注意事项

架构与对标差异

VeanUI 以自研数据引擎（useCascaderData）实现级联选择，不复用 listbox 的 selection/collection 基座（其单选值 + 扁平列表模型不适合树形级联）：shallowReactive 节点树缓存 pathValues / pathLabels / level 使查找 O(1)，menus computed 计算可见列，级联勾选走 setCheckedDeep / recomputeAncestors / collectCheckedNodes。CascaderOption 通过可取消的自定义事件（select / expand）派发交互（对齐 reka-ui）。scv() 配方 cascaderVariants 声明 16 个插槽与 7 个尺寸变体。

能力	VeanUI	Ant Design `Cascader`	reka-ui `Cascader`	Element Plus `Cascader`
Aria/styled 分离	✅	—	✅	—
多列面板	✅	✅	✅	✅
级联复选 + 半选状态	✅	✅	—	✅
懒加载 / 远程搜索	✅	✅	✅	✅
showCheckedStrategy	✅	✅	—	—
pathMode（路径值）	✅	✅	—	—
虚拟滚动	✅	—	—	—
可取消自定义事件	✅	—	✅	—
locale 文案（非硬编码）	✅	—	—	✅
axe 零违规（打开态）	✅	—	—	—

注意事项

内建文案全部本地化（LocaleCascaderMessages）；需要按实例覆盖时使用 emptyLabel / clearLabel 或对应 aria-label attrs。
filterable 模式下 trigger 变为 tabindex=-1，焦点落在搜索输入框——键盘导航从搜索框开始。
搜索模式下点击非叶子节点仅高亮，不展开多列路径（与 AntD 存在交互差异）——如需要可自行展开。
disabled 条目上的 select / expand 事件仍会触发（先派发后守卫）但不会改变 modelValue；消费方可自行判断。

常见问题

如何让值携带完整路径而非最后一级？

开启 pathMode，modelValue 将携带完整值/标签路径，而不只是最深节点。

如何从接口懒加载子级？

传入 loadChildren 返回节点的子级；引擎会跟踪加载状态并在完成后发出 loaded 事件。

如何做远程过滤？

使用 searchDelay 防抖并提供自定义 filter 实现（或直接传入已过滤的 items）；内置过滤在客户端按路径标签匹配。

如何只提交勾选的叶子？

配置 showCheckedStrategy: 'child'，父节点勾选时只收集叶子节点；'parent' 则提交父节点。

快速跳转

同分类组件

级联选择

概述

用法

特性

演示

Basic

Multiple

Searchable

LazyLoad

RemoteSearch

VirtualScroll

CustomOption

API

Aria 层

Cascader<T, M, P>

属性

事件

插槽

CascaderArrow

CascaderClear

属性

CascaderCompact<T, M, P>

属性

事件

插槽

CascaderCompactOption

CascaderCompactTag

CascaderCompactTriggerValue

CascaderContent

属性

事件

CascaderEmpty

CascaderMenu

属性

CascaderOption<T>

属性

事件

CascaderPortal

属性

CascaderRoot<T, M, P>

属性

事件

CascaderSearchInput

CascaderTags

插槽

CascaderTrigger

属性

CascaderValue

属性

注意事项

架构与对标差异

注意事项

常见问题

如何让值携带完整路径而非最后一级？

如何从接口懒加载子级？

如何做远程过滤？

如何只提交勾选的叶子？

更新日志

v0.31.0

优化

v0.30.0

修复

优化

修复

优化