ASAM UI
v1.0.0

选择与表单

级联面板 AsamCascaderPanel

常驻显示级联菜单，用于不需要输入框与弹层的层级选择。

使用场景 ​

常驻显示级联菜单，用于不需要输入框与弹层的层级选择。面板使用原始 options 与 props 字段映射，模型默认保存完整路径。

路径与节点插槽 ​

default 收到 node/data。change 更新选择路径；getCheckedNodes 读取选中节点，clearCheckedNodes 清空内部勾选。

路径与节点插槽

展开源码

多选与非叶节点 ​

props.multiple 开启多选，checkStrictly 允许选择任意层级，emitPath=false 返回节点值。与 ASAM Cascader 的规范化 valueMode 区分。

多选与非叶节点

展开源码

ASAM 扩展与迁移 ​

面板没有公开 size 属性，不声称支持输入控件的四档密度；外围选择输入与四档弹层密度见 Cascader。lazy/lazyLoad 由原始 props 控制，resolve 结果必须符合当前节点字段映射。

面板始终使用原生级联模型，TS 父模型使用 ref<AsamCascaderPanelProps['modelValue']>，初始路径数组与多选配置不缩窄原生模型的声明范围。

API 阅读方式 ​

下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。

级联面板 ​

本示例使用 AsamCascaderPanel 的公开原生协议；操作、数据结构与回调完整保存在 TS/JS SFC 中。

级联面板

展开源码

原生协议完整 API ​

面板直接使用原生 options、props、modelValue；不提供标准化 value/object 转换，也不提供 Select 输入壳。 完整说明。

属性 ​

名称 说明 类型 默认值
model-value / v-model 选中项绑定值 string/number/arraystring[] | number[] | any —
options 选项的数据源， value 和 label 可以通过 CascaderProps 自定义. arrayAsamCascaderOption[] —
props 配置选项, 请参阅下面 CascaderProps 表。 objectCascaderProps —
virtual-scroll 是否为大数据启用虚拟滚动 boolean false
item-size 虚拟滚动的节点高度 (px) number 34
height 虚拟滚动的菜单高度 (px) number 204

事件 ​

名称 说明 类型
change 当绑定值变化时触发的事件 Function(value: AsamCascaderNativeProps['modelValue'] | undefined) => void
update:modelValue 当绑定值变化时触发的事件 Function(value: AsamCascaderNativeProps['modelValue'] | undefined) => void
expand-change 当展开节点发生变化时触发 Function(value: AsamCascaderNode['pathValues']) => void
close 面板的关闭事件，提供给 Cascader 以便做更好的判断。 Function() => void

插槽 ​

名称 说明 类型
default 下级节点的自定义内容，它们分别是当前节点对象和节点数据。 object{ node: any, data: any }
empty 没有数据时面板的内容。 —

实例方法与状态 ​

名称 说明 类型
getCheckedNodes 获取一个当前选中节点的数组。(仅仅是传单) 是否只返回叶选中的节点，默认是 false Function(leafOnly: boolean) => AsamCascaderNode[] | undefined
clearCheckedNodes 清空选中的节点 Function() => void

级联配置类型（CascaderProps） ​

属性 说明 类型 默认值
expandTrigger 次级菜单的展开方式 enum'click' | 'hover' click
multiple 是否多选 boolean false
checkStrictly 是否严格的遵守父子节点不互相关联 boolean false
emitPath 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 boolean true
lazy 是否动态加载子节点，需与 lazyLoad 方法结合使用 boolean false
lazyLoad 加载子节点数据的方法，仅在 lazy 为 true 时生效；支持通过 reject 回调拒绝加载。 Function(node: Node, resolve: Resolve, reject: () => void) => void —
value 指定选项的值为选项对象的某个属性值 string value
label 指定节点标签为节点对象的某个属性值 string label
children 指定选项的子选项为选项对象的某个属性值 string children
disabled 指定选项的禁用为选项对象的某个属性值 string disabled
leaf 指定选项的叶子节点的标志位为选项对象的某个属性值 string leaf
hoverThreshold hover 时展开菜单的灵敏度阈值 number 500
checkOnClickNode 点击节点时是否选中或取消选中该节点 boolean false
checkOnClickLeaf 点击叶节点(最后一个子节点)时是否检查或取消节点 boolean true
showPrefix 是否显示单选框或复选框的前缀（图标） boolean true

API

属性 AsamCascaderPanelProps

属性名说明类型默认值
height虚拟滚动的菜单高度 (px)number | undefined204
border—(AsamCascaderPanelProps)["border"]true
props配置选项, 请参阅下面 CascaderProps 表。AsamCascaderNativeConfig | undefined工厂函数（每个实例创建）
itemSize虚拟滚动的节点高度 (px)number | undefined34
modelValue选中项绑定值(AsamCascaderPanelProps)["modelValue"]—
options选项的数据源， value 和 label 可以通过 CascaderProps 自定义.AsamCascaderOption[] | undefined工厂函数（每个实例创建）
renderLabel—(AsamCascaderPanelProps)["renderLabel"]—
virtualScroll是否为大数据启用虚拟滚动boolean | undefinedfalse

事件 AsamCascaderPanelEmits

属性名说明类型默认值
update:modelValue—(AsamCascaderPanelEmits)["update:modelValue"]—
change—(AsamCascaderPanelEmits)["change"]—
close—(AsamCascaderPanelEmits)["close"]—
expand-change—(AsamCascaderPanelEmits)["expand-change"]—

插槽 AsamCascaderPanelSlots

属性名说明类型默认值
default—((scope: { node: AsamCascaderNode; data: AsamCascaderOption; }) => unknown) | undefined—
empty—(() => unknown) | undefined—

实例方法与状态 AsamCascaderPanelExpose

属性名说明类型默认值
getCheckedNodes获取一个当前选中节点的数组。(仅仅是传单) 是否只返回叶选中的节点，默认是 false(leafOnly: boolean) => AsamCascaderNode[]—
menuList—(AsamCascaderPanelExpose)["menuList"]—
menus—(AsamCascaderPanelExpose)["menus"]—
checkedNodes—(AsamCascaderPanelExpose)["checkedNodes"]—
handleKeyDown—(e: KeyboardEvent) => void—
handleCheckChange—(node: AsamCascaderNode, checked: boolean, emitClose?: boolean) => void—
getFlattedNodes—(leafOnly: boolean) => AsamCascaderNode[]—
clearCheckedNodes清空选中的节点() => void—
calculateCheckedValue—() => void—
scrollToExpandingNode—() => void—
loadLazyRootNodes—() => void—

用法与契约补充说明 ​

原生协议完整 API ​

面板直接使用原生 options、props、modelValue；不提供标准化 value/object 转换，也不提供 Select 输入壳。默认 emitPath=true，multiple/checkStrictly/lazy 的语义与 Cascader native 一致。virtualScroll=true 时 height 限定窗口高度，itemSize 必须与实际行高一致；筛选、折叠标签与输入宽度由带输入壳的 Cascader 承接。

级联选择器 AsamCascader全局配置 AsamConfigProvider
参数与事件补充说明

完整透传 2.14.7 的基础参数，并在适用时使用 ASAM 尺寸密度。

参数与事件说明

height

必填：否；声明来源：上游声明。

默认值与来源
204（已安装运行时；已安装组件）

固定上游文档默认：204（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：CASCADER_PANEL_HEIGHT（2.14.7；源码事实，未作为 ASAM 运行实测）

border

必填：否；声明来源：上游声明。

border 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源
true（已安装运行时；已安装组件）

固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）

props

必填：否；声明来源：上游声明。

props 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

  • props.expandTrigger: PublicMember<NonNullable<AsamCascaderNativeConfig | undefined>, "expandTrigger"> — 上游声明

    次级菜单的展开方式

    固定上游文档默认：click（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

    枚举："hover" / "click"

  • props.multiple: boolean | undefined — 上游声明

    是否多选

    固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

    枚举：false / true

  • props.checkStrictly: boolean | undefined — 上游声明

    是否严格的遵守父子节点不互相关联

    固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

    枚举：false / true

  • props.emitPath: boolean | undefined — 上游声明

    在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值

    固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

    枚举：false / true

  • props.lazy: boolean | undefined — 上游声明

    是否动态加载子节点，需与 lazyLoad 方法结合使用

    固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

    枚举：false / true

  • props.lazyLoad: PublicMember<NonNullable<AsamCascaderNativeConfig | undefined>, "lazyLoad"> — 上游声明

    加载动态数据的方法，仅在 lazy 为 true 时有效 reject 参数在 2.11.5 版本及以上支持。

    固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

    事件参数：(node: AsamCascaderNode, resolve: Parameters<Extract<NonNullable<PublicMember<NonNullable<AsamCascaderNativeConfig | undefined>, "lazyLoad">>, (...args: never[]) => unknown>>[1], reject: () => void): void

  • props.value: string | undefined — 上游声明

    指定选项的值为选项对象的某个属性值

    固定上游文档默认：value（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

  • props.label: string | undefined — 上游声明

    指定节点标签为节点对象的某个属性值

    固定上游文档默认：label（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

  • props.children: string | undefined — 上游声明

    指定选项的子选项为选项对象的某个属性值

    固定上游文档默认：children（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

  • props.disabled: PublicMember<NonNullable<AsamCascaderNativeConfig | undefined>, "disabled"> — 上游声明

    指定选项的禁用为选项对象的某个属性值

    固定上游文档默认：disabled（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

    事件参数：(data: AsamCascaderOption, node: AsamCascaderNode): boolean

  • props.leaf: PublicMember<NonNullable<AsamCascaderNativeConfig | undefined>, "leaf"> — 上游声明

    指定选项的叶子节点的标志位为选项对象的某个属性值

    固定上游文档默认：leaf（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

    事件参数：(data: AsamCascaderOption, node: AsamCascaderNode): boolean

  • props.hoverThreshold: number | undefined — 上游声明

    hover 时展开菜单的灵敏度阈值

    固定上游文档默认：500（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

  • props.checkOnClickNode: boolean | undefined — 上游声明

    点击节点时是否选中或取消选中该节点

    固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

    枚举：false / true

  • props.checkOnClickLeaf: boolean | undefined — 上游声明

    点击叶节点(最后一个子节点)时是否检查或取消节点

    固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

    枚举：false / true

  • props.showPrefix: boolean | undefined — 上游声明

    是否显示单选框或复选框的前缀（图标）

    固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

    枚举：false / true

默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码工厂（未执行）：() => ({}) as CascaderProps（2.14.7；源码事实，未作为 ASAM 运行实测）

itemSize

必填：否；声明来源：上游声明。

默认值与来源
34（已安装运行时；已安装组件）

固定上游文档默认：34（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：CASCADER_PANEL_ITEM_SIZE（2.14.7；源码事实，未作为 ASAM 运行实测）

modelValue

必填：否；声明来源：上游声明。

默认值与来源
未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

options

必填：否；声明来源：上游声明。

默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码工厂（未执行）：() => [] as CascaderOption[]（2.14.7；源码事实，未作为 ASAM 运行实测）

renderLabel

必填：否；声明来源：上游声明。

renderLabel 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: Parameters<Extract<NonNullable<(AsamCascaderPanelProps)["renderLabel"]>, (...args: never[]) => unknown>>[0]): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[]

默认值与来源
未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

virtualScroll

必填：否；声明来源：上游声明。

virtualScroll 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源
false（隐式 Boolean 默认；已安装组件）

固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

AsamCascaderPanelProps 公开类型视图
ts
import type { VNode } from 'vue';
import type { AsamCascaderPanelProps, AsamCascaderNativeConfig, AsamCascaderNode, AsamCascaderOption } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamCascaderPanelProps
type PublicContract = {
	"height"?: number | undefined;
	"border"?: (AsamCascaderPanelProps)["border"];
	"props"?: AsamCascaderNativeConfig | undefined;
	"itemSize"?: number | undefined;
	"modelValue"?: (AsamCascaderPanelProps)["modelValue"];
	"options"?: AsamCascaderOption[] | undefined;
	"renderLabel"?: (AsamCascaderPanelProps)["renderLabel"];
	"virtualScroll"?: boolean | undefined;
};

参数与事件说明

update:modelValue

必填：是；声明来源：上游声明。

change

必填：是；声明来源：上游声明。

close

必填：是；声明来源：上游声明。

expand-change

必填：是；声明来源：上游声明。

AsamCascaderPanelEmits 公开类型视图
ts
import type { AsamCascaderPanelEmits } from '@asam-ui/ui';

// AsamCascaderPanelEmits
type PublicContract = {
	"update:modelValue": (AsamCascaderPanelEmits)["update:modelValue"];
	"change": (AsamCascaderPanelEmits)["change"];
	"close": (AsamCascaderPanelEmits)["close"];
	"expand-change": (AsamCascaderPanelEmits)["expand-change"];
};

参数与事件说明

default

必填：否；声明来源：ASAM 声明。

default 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(scope: { node: AsamCascaderNode; data: AsamCascaderOption; }): unknown

empty

必填：否；声明来源：ASAM 声明。

empty 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): unknown

AsamCascaderPanelSlots 公开类型视图
ts
import type { AsamCascaderPanelSlots, AsamCascaderNode, AsamCascaderOption } from '@asam-ui/ui';

// AsamCascaderPanelSlots
type PublicContract = {
	"default"?: ((scope: { node: AsamCascaderNode; data: AsamCascaderOption; }) => unknown) | undefined;
	"empty"?: (() => unknown) | undefined;
};

参数与事件说明

getCheckedNodes

必填：是；声明来源：上游声明。

getCheckedNodes 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(leafOnly: boolean): AsamCascaderNode[]

menuList

必填：是；声明来源：上游声明。

menuList 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

menus

必填：是；声明来源：上游声明。

menus 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

checkedNodes

必填：是；声明来源：上游声明。

checkedNodes 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

handleKeyDown

必填：是；声明来源：上游声明。

handleKeyDown 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(e: KeyboardEvent): void

handleCheckChange

必填：是；声明来源：上游声明。

handleCheckChange 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(node: AsamCascaderNode, checked: boolean, emitClose?: boolean | undefined): void

getFlattedNodes

必填：是；声明来源：上游声明。

getFlattedNodes 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(leafOnly: boolean): AsamCascaderNode[]

clearCheckedNodes

必填：是；声明来源：上游声明。

clearCheckedNodes 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): void

calculateCheckedValue

必填：是；声明来源：上游声明。

calculateCheckedValue 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): void

scrollToExpandingNode

必填：是；声明来源：上游声明。

scrollToExpandingNode 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): void

loadLazyRootNodes

必填：是；声明来源：上游声明。

loadLazyRootNodes 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): void

AsamCascaderPanelExpose 公开类型视图
ts
import type { AsamCascaderPanelExpose, AsamCascaderNode, AsamCascaderOption, AsamCascaderPanelProps } from '@asam-ui/ui';

// AsamCascaderPanelExpose
type PublicContract = {
	"getCheckedNodes": (leafOnly: boolean) => AsamCascaderNode[];
	"menuList": (AsamCascaderPanelExpose)["menuList"];
	"menus": (AsamCascaderPanelExpose)["menus"];
	"checkedNodes": (AsamCascaderPanelExpose)["checkedNodes"];
	"handleKeyDown": (e: KeyboardEvent) => void;
	"handleCheckChange": (node: AsamCascaderNode, checked: boolean, emitClose?: boolean) => void;
	"getFlattedNodes": (leafOnly: boolean) => AsamCascaderNode[];
	"clearCheckedNodes": () => void;
	"calculateCheckedValue": () => void;
	"scrollToExpandingNode": () => void;
	"loadLazyRootNodes": () => void;
};

搜索文档

Tab 选择结果 Enter 打开 Esc 关闭