远端级联选择器
在级联选择器上管理异步选项、重载和请求取消。
基础用法
示例通过本地 Promise 函数加载选项，支持模型更新、暂停与重载。所有请求都留在演示内部。
本地数据与生命周期
vue
<template>
<section class="data-demo">
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="active">启用请求</AsamCheckboxItem>
<AsamRemoteCascader
ref="control"
v-model="value"
:data-source="dataSource"
:active="active"
size="default"
placeholder="请选择或输入"
@error="error = $event.message"
@success="error = ''"
>
<template #default="{ option, data }">{{ option?.label ?? data.label }}</template>
</AsamRemoteCascader>
<div class="demo-actions">
<AsamButton type="default" native-type="button" :disabled="!active" @click="reload"
>强制重载</AsamButton
>
<AsamButton type="default" native-type="button" @click="control?.cancel()"
>取消请求</AsamButton
>
</div>
<p class="example-paragraph" role="status">{{ result }} {{ error }}</p>
<pre>{{ value }}</pre>
</section>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamRemoteCascader, defineAsamOptions } from '@asam-ui/ui';
import type { AsamRemoteCascaderExpose, AsamApiRequest } from '@asam-ui/ui';
defineOptions({ name: 'AsamRemoteCascaderBasicDemoExample' });
interface Item {
label: string;
value: string;
children?: readonly Item[];
}
interface Query {
text: string;
}
const value = ref<string | null>(null);
const active = ref(true);
const control = ref<AsamRemoteCascaderExpose<string, Item>>();
const error = ref('');
const result = ref('');
const items: readonly Item[] = [
{ label: '准备', value: 'ready', children: [{ label: '就绪', value: 'available' }] },
{ label: '进行', value: 'running' }
];
const api: AsamApiRequest<Query, readonly Item[]> = async (params, context) => {
context.signal.throwIfAborted();
return items.filter((item) => item.label.includes(params.text));
};
const factory = defineAsamOptions<string, Item>();
const dataSource = factory.api({
api,
params: { text: '' },
transform: (response) => response,
fieldNames: { label: 'label', value: 'value', children: 'children' }
});
async function reload() {
const response = await control.value?.reload({ force: true });
result.value = response?.status ?? 'cancelled';
}
</script>
<style scoped>
.data-demo {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.data-demo > p,
.data-demo > pre,
.data-demo > fieldset {
width: 100%;
min-width: 0;
margin: 0;
}
.demo-actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<section class="data-demo">
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="active">启用请求</AsamCheckboxItem>
<AsamRemoteCascader
ref="control"
v-model="value"
:data-source="dataSource"
:active="active"
size="default"
placeholder="请选择或输入"
@error="error = $event.message"
@success="error = ''"
>
<template #default="{ option, data }">{{ option?.label ?? data.label }}</template>
</AsamRemoteCascader>
<div class="demo-actions">
<AsamButton type="default" native-type="button" :disabled="!active" @click="reload"
>强制重载</AsamButton
>
<AsamButton type="default" native-type="button" @click="control?.cancel()"
>取消请求</AsamButton
>
</div>
<p class="example-paragraph" role="status">{{ result }} {{ error }}</p>
<pre>{{ value }}</pre>
</section>
</template>
<script setup>
import { ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamRemoteCascader, defineAsamOptions } from '@asam-ui/ui';
defineOptions({ name: 'AsamRemoteCascaderBasicDemoExample' });
const value = ref(null);
const active = ref(true);
const control = ref();
const error = ref('');
const result = ref('');
const items = [
{ label: '准备', value: 'ready', children: [{ label: '就绪', value: 'available' }] },
{ label: '进行', value: 'running' }
];
const api = async (params, context) => {
context.signal.throwIfAborted();
return items.filter((item) => item.label.includes(params.text));
};
const factory = defineAsamOptions();
const dataSource = factory.api({
api,
params: { text: '' },
transform: (response) => response,
fieldNames: { label: 'label', value: 'value', children: 'children' }
});
async function reload() {
const response = await control.value?.reload({ force: true });
result.value = response?.status ?? 'cancelled';
}
</script>
<style scoped>
.data-demo {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.data-demo > p,
.data-demo > pre,
.data-demo > fieldset {
width: 100%;
min-width: 0;
margin: 0;
}
.demo-actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>数据来源与覆盖
dataSource、api + params、request 三种来源只选一种。 完整说明。
单选值模式使用标量或 null；对象模式使用规范化 AsamOption。多选的数组与分隔字符串模式由 multiple、valueMode、multipleValueMode 联合约束；对象模式不能使用字符串存储。切换值策略时同时调整模型类型。
省略顶层 multiple 时使用公开配置 props.multiple；显式顶层 false 或 true 优先。
动态改变多选配置时同时更新模型，来源校验与显示控件采用同一有效策略。
对象单选清空统一发布 null；合法原生 valueOnClear 为 false 或 0、且 emptyValues 包含该值时，也保留 update:modelValue、change 与 clear 事件。 完整说明。
层级来源一次返回完整树；children 通过字段映射规范化。数据层不开放 lazy/load 或 props.lazy/props.lazyLoad，不能从基础页的节点懒加载示例推导本组件支持。值模型保留 ASAM 标量/对象策略，不开放 native 值模式。
生命周期、事件与实例
active=false 暂停请求并保留上次成功数据；reload({ force: true }) 请求新数据，cancel() 取消当前请求。 完整说明。
immediate 控制初始化是否请求，active 控制请求是否启用。初始化和默认值以本页自动 API 的原始来源为准。
插槽与基础能力
default 插槽保留对应级联或树节点的 data/node 与可选 option；tag、label 等以对应基础入口和本页公开 slots 为准。
本站继承关系
- 级联选择器：适用的基础展示、交互与公开 API。
本页数据来源、模型、事件和实例的覆盖规则优先；本站链接不扩大本组件公开契约。尺寸使用基础组件的 ASAM 尺寸规则，示例使用 default。
完整树与对象多选
示例一次返回完整组织树，使用 multiple 与 valueMode=object 保存规范化对象及 raw 成员；禁用成员不能勾选。 完整说明。
示例逐次保存 update:modelValue、change、success 和 error 的载荷快照：模型与成功结果保留规范化对象及原始 raw 树；失败记录错误种类和消息。 完整说明。
完整树、对象多选与失败恢复
vue
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "data-demo" };
const _hoisted_2: any = ["data-member"];
const _hoisted_3: any = { class: "demo-actions" };
const _hoisted_4: any = {
class: "example-paragraph",
role: "status"
};
const _hoisted_5: any = { "data-testid": "tree-model" };
const _hoisted_6: any = { "data-testid": "checked-count" };
const _hoisted_7: any = { "data-testid": "hierarchy-data-events" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const provider_js_1: any = require("./provider.js");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamRemoteCascaderCompleteTreeDemo' },
__name: 'Demo',
setup(__props?: any) {
const active: any = (0, vue_3.ref)(true);
const failure: any = (0, vue_3.ref)(false);
const slow: any = (0, vue_3.ref)(false);
const api: any = async (_params?: any, context?: any) => {
await new Promise((done?: any) => setTimeout(done, slow.value ? 500 : 100));
context.signal.throwIfAborted();
if (failure.value)
throw new Error('演示完整树请求失败');
return provider_js_1.members;
};
const dataSource: any = (0, ui_1.defineAsamOptions)().api({
api,
params: undefined,
transform: (response?: any) => response,
fieldNames: { label: 'label', value: 'value', children: 'children', disabled: 'disabled' }
});
const value: any = (0, vue_3.ref)([]);
const control: any = (0, vue_3.ref)();
const result: any = (0, vue_3.ref)('');
const successes: any = (0, vue_3.ref)(0);
const error: any = (0, vue_3.ref)('');
const checkedCount: any = (0, vue_3.ref)(0);
const events: any = (0, vue_3.ref)([]);
function recordEvent(name?: any, payload?: any) {
const snapshot: any = JSON.parse(JSON.stringify(payload));
events.value = [...events.value, { name, payload: snapshot }];
}
function onModelUpdate(payload?: any) {
recordEvent('update:modelValue', payload);
}
function onModelChange(payload?: any) {
recordEvent('change', payload);
}
function onSuccess(payload?: any) {
recordEvent('success', payload);
successes.value++;
error.value = '';
}
function onError(payload?: any) {
recordEvent('error', { kind: payload.kind, message: payload.message });
error.value = payload.message;
}
async function reload() {
result.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';
}
async function cancelSlow() {
slow.value = true;
const pending: any = control.value?.reload({ force: true });
setTimeout(() => control.value?.cancel(), 30);
result.value = (await pending)?.status ?? 'cancelled';
slow.value = false;
}
function inspect() {
checkedCount.value = control.value?.getCheckedNodes(false)?.length ?? 0;
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createCommentVNode)(" prettier-ignore "),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: active.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((active).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_2.createTextVNode)("启用请求", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createCommentVNode)(" prettier-ignore "),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: failure.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((failure).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("模拟接口失败", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamRemoteCascader), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": [
_cache[2] || (_cache[2] = ($event?: any) => ((value).value = $event)),
onModelUpdate
],
"data-source": (0, vue_2.unref)(dataSource),
multiple: "",
"value-mode": "object",
active: active.value,
clearable: "",
filterable: "",
teleported: false,
props: { expandTrigger: 'click' },
placeholder: "选择成员",
size: "default",
onChange: onModelChange,
onSuccess: onSuccess,
onError: onError
}, {
default: (0, vue_2.withCtx)(({ option, data }: any) => [
(0, vue_2.createElementVNode)("span", {
"data-member": option?.raw.id
}, (0, vue_2.toDisplayString)(data.label), 9 /* TEXT, PROPS */, _hoisted_2)
]),
header: (0, vue_2.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "hierarchy-header"
}, "完整组织树", -1 /* CACHED */)
]))]),
footer: (0, vue_2.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "hierarchy-footer"
}, "冻结成员不能勾选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue", "data-source", "active"]),
(0, vue_2.createElementVNode)("div", _hoisted_3, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: !active.value,
onClick: reload
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_2.createTextVNode)("强制重载", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: cancelSlow
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_2.createTextVNode)("取消慢请求", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: inspect
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_2.createTextVNode)("读取勾选节点", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[3] || (_cache[3] = ($event?: any) => (value.value = []))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_2.createTextVNode)("清空模型", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_2.createElementVNode)("p", _hoisted_4, "结果：" + (0, vue_2.toDisplayString)(result.value) + "；成功次数：" + (0, vue_2.toDisplayString)(successes.value) + "；" + (0, vue_2.toDisplayString)(error.value), 1 /* TEXT */),
(0, vue_2.createElementVNode)("pre", _hoisted_5, (0, vue_2.toDisplayString)(JSON.stringify(value.value)), 1 /* TEXT */),
(0, vue_2.createElementVNode)("pre", _hoisted_6, (0, vue_2.toDisplayString)(checkedCount.value), 1 /* TEXT */),
(0, vue_2.createElementVNode)("pre", _hoisted_7, (0, vue_2.toDisplayString)(JSON.stringify(events.value)), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-62cdfdad";
},
"provider.ts": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.members = void 0;
exports.members = [
{
id: 'team',
label: '研发组',
value: 'team',
children: [
{ id: 'alpha', label: 'Alpha', value: 'alpha' },
{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },
{ id: 'beta', label: 'Beta', value: 'beta' }
]
}
];
},
};
const __dependencies: any = {"Demo.vue":{"./provider.js":"provider.ts"},"provider.ts":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.data-demo[data-v-62cdfdad] {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.data-demo > p[data-v-62cdfdad],
.data-demo > pre[data-v-62cdfdad],
.data-demo > fieldset[data-v-62cdfdad] {
width: 100%;
min-width: 0;
margin: 0;
}
.demo-actions[data-v-62cdfdad] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
}
p[data-v-62cdfdad]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "data-demo" };
const _hoisted_2 = ["data-member"];
const _hoisted_3 = { class: "demo-actions" };
const _hoisted_4 = {
class: "example-paragraph",
role: "status"
};
const _hoisted_5 = { "data-testid": "tree-model" };
const _hoisted_6 = { "data-testid": "checked-count" };
const _hoisted_7 = { "data-testid": "hierarchy-data-events" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const provider_js_1 = require("./provider.js");
exports.default = Object.assign({ name: 'AsamRemoteCascaderCompleteTreeDemo' }, {
__name: 'Demo',
setup(__props) {
const active = (0, vue_2.ref)(true);
const failure = (0, vue_2.ref)(false);
const slow = (0, vue_2.ref)(false);
const api = async (_params, context) => {
await new Promise((done) => setTimeout(done, slow.value ? 500 : 100));
context.signal.throwIfAborted();
if (failure.value)
throw new Error('演示完整树请求失败');
return provider_js_1.members;
};
const dataSource = (0, ui_1.defineAsamOptions)().api({
api,
params: undefined,
transform: (response) => response,
fieldNames: { label: 'label', value: 'value', children: 'children', disabled: 'disabled' }
});
const value = (0, vue_2.ref)([]);
const control = (0, vue_2.ref)();
const result = (0, vue_2.ref)('');
const successes = (0, vue_2.ref)(0);
const error = (0, vue_2.ref)('');
const checkedCount = (0, vue_2.ref)(0);
const events = (0, vue_2.ref)([]);
function recordEvent(name, payload) {
const snapshot = JSON.parse(JSON.stringify(payload));
events.value = [...events.value, { name, payload: snapshot }];
}
function onModelUpdate(payload) {
recordEvent('update:modelValue', payload);
}
function onModelChange(payload) {
recordEvent('change', payload);
}
function onSuccess(payload) {
recordEvent('success', payload);
successes.value++;
error.value = '';
}
function onError(payload) {
recordEvent('error', { kind: payload.kind, message: payload.message });
error.value = payload.message;
}
async function reload() {
result.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';
}
async function cancelSlow() {
slow.value = true;
const pending = control.value?.reload({ force: true });
setTimeout(() => control.value?.cancel(), 30);
result.value = (await pending)?.status ?? 'cancelled';
slow.value = false;
}
function inspect() {
checkedCount.value = control.value?.getCheckedNodes(false)?.length ?? 0;
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createCommentVNode)(" prettier-ignore "),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: active.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((active).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_1.createTextVNode)("启用请求", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createCommentVNode)(" prettier-ignore "),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: failure.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((failure).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("模拟接口失败", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamRemoteCascader), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": [
_cache[2] || (_cache[2] = $event => ((value).value = $event)),
onModelUpdate
],
"data-source": (0, vue_1.unref)(dataSource),
multiple: "",
"value-mode": "object",
active: active.value,
clearable: "",
filterable: "",
teleported: false,
props: { expandTrigger: 'click' },
placeholder: "选择成员",
size: "default",
onChange: onModelChange,
onSuccess: onSuccess,
onError: onError
}, {
default: (0, vue_1.withCtx)(({ option, data }) => [
(0, vue_1.createElementVNode)("span", {
"data-member": option?.raw.id
}, (0, vue_1.toDisplayString)(data.label), 9 /* TEXT, PROPS */, _hoisted_2)
]),
header: (0, vue_1.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "hierarchy-header"
}, "完整组织树", -1 /* CACHED */)
]))]),
footer: (0, vue_1.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "hierarchy-footer"
}, "冻结成员不能勾选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue", "data-source", "active"]),
(0, vue_1.createElementVNode)("div", _hoisted_3, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: !active.value,
onClick: reload
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_1.createTextVNode)("强制重载", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: cancelSlow
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_1.createTextVNode)("取消慢请求", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: inspect
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_1.createTextVNode)("读取勾选节点", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[3] || (_cache[3] = $event => (value.value = []))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_1.createTextVNode)("清空模型", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_1.createElementVNode)("p", _hoisted_4, "结果：" + (0, vue_1.toDisplayString)(result.value) + "；成功次数：" + (0, vue_1.toDisplayString)(successes.value) + "；" + (0, vue_1.toDisplayString)(error.value), 1 /* TEXT */),
(0, vue_1.createElementVNode)("pre", _hoisted_5, (0, vue_1.toDisplayString)(JSON.stringify(value.value)), 1 /* TEXT */),
(0, vue_1.createElementVNode)("pre", _hoisted_6, (0, vue_1.toDisplayString)(checkedCount.value), 1 /* TEXT */),
(0, vue_1.createElementVNode)("pre", _hoisted_7, (0, vue_1.toDisplayString)(JSON.stringify(events.value)), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-13395f71";
},
"provider.js": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.members = void 0;
exports.members = [
{
id: 'team',
label: '研发组',
value: 'team',
children: [
{ id: 'alpha', label: 'Alpha', value: 'alpha' },
{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },
{ id: 'beta', label: 'Beta', value: 'beta' }
]
}
];
},
};
const __dependencies = {"Demo.vue":{"./provider.js":"provider.js"},"provider.js":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.data-demo[data-v-13395f71] {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.data-demo > p[data-v-13395f71],
.data-demo > pre[data-v-13395f71],
.data-demo > fieldset[data-v-13395f71] {
width: 100%;
min-width: 0;
margin: 0;
}
.demo-actions[data-v-13395f71] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
}
p[data-v-13395f71]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>数据入口的原生事件边界
Cascader 使用原生 visibleChange、expandChange 和 removeTag 名称；没有 Tree 拖放、check、popup-scroll 或 end-reached 事件。数据包装增加 success/error，模型事件沿用本文的值/对象模式。
层级展示与勾选策略
完整示例使用原始字符串数组模型；数据来源一次提供完整树，保留禁用节点，并通过 default 插槽读取节点 data/node 和规范化 option.raw。 完整说明。
示例明确设置 height=180、itemSize=30、fitInputWidth=360。 完整说明。
当前固定版本存在原生兼容限制：已有勾选项时，仅动态修改 showCheckedStrategy 不会立即刷新已显示的标签；模型和勾选节点保持不变。此限制在原生与数据入口的相同输入中均复现，不能将策略属性变化视为已有标签已更新。
父子显示、标签和虚拟滚动
vue
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "demo-layout-1" };
const _hoisted_2: any = { class: "demo-layout-2" };
const _hoisted_3: any = ["data-tree-presentation-key", "data-leaf", "data-original-id"];
const _hoisted_4: any = { "data-testid": "tree-presentation-suggestion" };
const _hoisted_5: any = { "data-testid": "tree-presentation-tag" };
const _hoisted_6: any = { "data-testid": "tree-presentation-state" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const provider_js_1: any = require("./provider.js");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamRemoteCascaderNativeTreePresentationDemo' },
__name: 'Demo',
setup(__props?: any) {
const api: any = async (_params?: any, context?: any) => {
context.signal.throwIfAborted();
return provider_js_1.members;
};
const dataSource: any = (0, ui_1.defineAsamOptions)().api({
api,
params: undefined,
transform: (response?: any) => response,
fieldNames: { label: 'label', value: 'value', children: 'children', disabled: 'disabled' }
});
const control: any = (0, vue_3.ref)();
const value: any = (0, vue_3.ref)(['alpha', 'beta']);
const removed: any = (0, vue_3.ref)([]);
const strict: any = (0, vue_3.ref)(false);
const disabled: any = (0, vue_3.ref)(false);
const customTag: any = (0, vue_3.ref)(false);
const parentStrategy: any = (0, vue_3.ref)(false);
const virtual: any = (0, vue_3.ref)(true);
const fitWidth: any = (0, vue_3.ref)(360);
const checkedKeys: any = (0, vue_3.ref)([]);
function inspect() {
checkedKeys.value = control.value?.getCheckedNodes(false)?.map((node?: any) => node.value) ?? [];
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createElementVNode)("div", _hoisted_2, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[0] || (_cache[0] = ($event?: any) => (customTag.value = !customTag.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_2.createTextVNode)("切换树自定义标签", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[1] || (_cache[1] = ($event?: any) => (disabled.value = !disabled.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_2.createTextVNode)("切换树禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[2] || (_cache[2] = ($event?: any) => (strict.value = !strict.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_2.createTextVNode)("切换父级独立选择", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[3] || (_cache[3] = ($event?: any) => (parentStrategy.value = !parentStrategy.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_2.createTextVNode)(" 切换父子显示策略 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[4] || (_cache[4] = ($event?: any) => (virtual.value = !virtual.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_2.createTextVNode)("切换级联虚拟滚动", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[5] || (_cache[5] = ($event?: any) => (fitWidth.value = 360))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_2.createTextVNode)("固定搜索宽度", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[6] || (_cache[6] = ($event?: any) => (fitWidth.value = true))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[17] || (_cache[17] = [
(0, vue_2.createTextVNode)("搜索与输入同宽", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[7] || (_cache[7] = ($event?: any) => (fitWidth.value = false))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[18] || (_cache[18] = [
(0, vue_2.createTextVNode)("搜索自然宽度", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[8] || (_cache[8] = ($event?: any) => (value.value = ['alpha', 'beta']))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[19] || (_cache[19] = [
(0, vue_2.createTextVNode)("恢复树模型", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: inspect
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[20] || (_cache[20] = [
(0, vue_2.createTextVNode)("读取树勾选键", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamRemoteCascader), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event?: any) => ((value).value = $event)),
"data-source": (0, vue_2.unref)(dataSource),
multiple: "",
"collapse-tags": "",
"collapse-tags-tooltip": "",
"max-collapse-tags": 1,
disabled: disabled.value,
clearable: "",
filterable: "",
teleported: false,
style: { "width": "280px" },
"popper-class": "data009-tree-presentation-popper",
placeholder: "高级树展示",
props: { checkStrictly: strict.value, expandTrigger: 'click' },
"show-checked-strategy": parentStrategy.value ? 'parent' : 'child',
"virtual-scroll": virtual.value,
height: 180,
"item-size": 30,
"fit-input-width": fitWidth.value,
onRemoveTag: _cache[10] || (_cache[10] = ($event?: any) => (removed.value.push($event)))
}, (0, vue_2.createSlots)({
prefix: (0, vue_2.withCtx)(() => [
_cache[21] || (_cache[21] = (0, vue_2.createElementVNode)("span", { "data-testid": "tree-presentation-prefix" }, "树前缀", -1 /* CACHED */))
]),
header: (0, vue_2.withCtx)(() => [
_cache[22] || (_cache[22] = (0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "tree-presentation-header"
}, "完整层级来源", -1 /* CACHED */))
]),
footer: (0, vue_2.withCtx)(() => [
_cache[23] || (_cache[23] = (0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "tree-presentation-footer"
}, "禁用项保持禁用", -1 /* CACHED */))
]),
empty: (0, vue_2.withCtx)(() => [
_cache[24] || (_cache[24] = (0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "tree-presentation-empty"
}, "未找到树节点", -1 /* CACHED */))
]),
default: (0, vue_2.withCtx)(({ data, node, option }: any) => [
(0, vue_2.createElementVNode)("span", {
"data-tree-presentation-key": data.value,
"data-leaf": node.isLeaf,
"data-original-id": option?.raw.id
}, (0, vue_2.toDisplayString)(data.label), 9 /* TEXT, PROPS */, _hoisted_3)
]),
"suggestion-item": (0, vue_2.withCtx)(({ item }: any) => [
(0, vue_2.createElementVNode)("span", _hoisted_4, (0, vue_2.toDisplayString)(item.text) + " 完整树搜索结果 ", 1 /* TEXT */)
]),
_: 2 /* DYNAMIC */
}, [
(customTag.value)
? {
name: "tag",
fn: (0, vue_2.withCtx)(({ data, deleteTag }: any) => [
(0, vue_2.createElementVNode)("div", _hoisted_5, [
(0, vue_2.createElementVNode)("span", null, "已选 " + (0, vue_2.toDisplayString)(data.length) + " 项", 1 /* TEXT */),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: disabled.value || !data.length,
onClick: ($event?: any) => (deleteTag(data[0]))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[25] || (_cache[25] = [
(0, vue_2.createTextVNode)(" 删除树首个标签 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])
])
]),
key: "0"
}
: undefined
]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "data-source", "disabled", "props", "show-checked-strategy", "virtual-scroll", "fit-input-width"]),
(0, vue_2.createElementVNode)("pre", _hoisted_6, (0, vue_2.toDisplayString)(JSON.stringify({
value: value.value,
removed: removed.value,
strict: strict.value,
disabled: disabled.value,
customTag: customTag.value,
parentStrategy: parentStrategy.value,
virtual: virtual.value,
fitWidth: fitWidth.value,
checkedKeys: checkedKeys.value
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-701fa131";
},
"provider.ts": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.members = void 0;
exports.members = [
{
id: 'team',
label: '研发组',
value: 'team',
children: [
{ id: 'alpha', label: 'Alpha', value: 'alpha' },
{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },
{ id: 'beta', label: 'Beta', value: 'beta' }
]
},
{
id: 'large',
label: '大型分组',
value: 'large',
children: Array.from({ length: 200 }, (_?: any, index?: any) => ({
id: 'member-' + index,
label: '成员 ' + index,
value: 'member-' + index
}))
}
];
},
};
const __dependencies: any = {"Demo.vue":{"./provider.js":"provider.ts"},"provider.ts":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.demo-layout-1[data-v-701fa131] {
display: grid;
gap: var(--asam-space-md);
}
.demo-layout-2[data-v-701fa131] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
p[data-v-701fa131]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "demo-layout-1" };
const _hoisted_2 = { class: "demo-layout-2" };
const _hoisted_3 = ["data-tree-presentation-key", "data-leaf", "data-original-id"];
const _hoisted_4 = { "data-testid": "tree-presentation-suggestion" };
const _hoisted_5 = { "data-testid": "tree-presentation-tag" };
const _hoisted_6 = { "data-testid": "tree-presentation-state" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const provider_js_1 = require("./provider.js");
exports.default = Object.assign({ name: 'AsamRemoteCascaderNativeTreePresentationDemo' }, {
__name: 'Demo',
setup(__props) {
const api = async (_params, context) => {
context.signal.throwIfAborted();
return provider_js_1.members;
};
const dataSource = (0, ui_1.defineAsamOptions)().api({
api,
params: undefined,
transform: (response) => response,
fieldNames: { label: 'label', value: 'value', children: 'children', disabled: 'disabled' }
});
const control = (0, vue_2.ref)();
const value = (0, vue_2.ref)(['alpha', 'beta']);
const removed = (0, vue_2.ref)([]);
const strict = (0, vue_2.ref)(false);
const disabled = (0, vue_2.ref)(false);
const customTag = (0, vue_2.ref)(false);
const parentStrategy = (0, vue_2.ref)(false);
const virtual = (0, vue_2.ref)(true);
const fitWidth = (0, vue_2.ref)(360);
const checkedKeys = (0, vue_2.ref)([]);
function inspect() {
checkedKeys.value = control.value?.getCheckedNodes(false)?.map((node) => node.value) ?? [];
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[0] || (_cache[0] = $event => (customTag.value = !customTag.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_1.createTextVNode)("切换树自定义标签", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[1] || (_cache[1] = $event => (disabled.value = !disabled.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_1.createTextVNode)("切换树禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[2] || (_cache[2] = $event => (strict.value = !strict.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_1.createTextVNode)("切换父级独立选择", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[3] || (_cache[3] = $event => (parentStrategy.value = !parentStrategy.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_1.createTextVNode)(" 切换父子显示策略 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[4] || (_cache[4] = $event => (virtual.value = !virtual.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_1.createTextVNode)("切换级联虚拟滚动", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[5] || (_cache[5] = $event => (fitWidth.value = 360))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_1.createTextVNode)("固定搜索宽度", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[6] || (_cache[6] = $event => (fitWidth.value = true))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[17] || (_cache[17] = [
(0, vue_1.createTextVNode)("搜索与输入同宽", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[7] || (_cache[7] = $event => (fitWidth.value = false))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[18] || (_cache[18] = [
(0, vue_1.createTextVNode)("搜索自然宽度", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[8] || (_cache[8] = $event => (value.value = ['alpha', 'beta']))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[19] || (_cache[19] = [
(0, vue_1.createTextVNode)("恢复树模型", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: inspect
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[20] || (_cache[20] = [
(0, vue_1.createTextVNode)("读取树勾选键", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamRemoteCascader), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[9] || (_cache[9] = $event => ((value).value = $event)),
"data-source": (0, vue_1.unref)(dataSource),
multiple: "",
"collapse-tags": "",
"collapse-tags-tooltip": "",
"max-collapse-tags": 1,
disabled: disabled.value,
clearable: "",
filterable: "",
teleported: false,
style: { "width": "280px" },
"popper-class": "data009-tree-presentation-popper",
placeholder: "高级树展示",
props: { checkStrictly: strict.value, expandTrigger: 'click' },
"show-checked-strategy": parentStrategy.value ? 'parent' : 'child',
"virtual-scroll": virtual.value,
height: 180,
"item-size": 30,
"fit-input-width": fitWidth.value,
onRemoveTag: _cache[10] || (_cache[10] = $event => (removed.value.push($event)))
}, (0, vue_1.createSlots)({
prefix: (0, vue_1.withCtx)(() => [
_cache[21] || (_cache[21] = (0, vue_1.createElementVNode)("span", { "data-testid": "tree-presentation-prefix" }, "树前缀", -1 /* CACHED */))
]),
header: (0, vue_1.withCtx)(() => [
_cache[22] || (_cache[22] = (0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "tree-presentation-header"
}, "完整层级来源", -1 /* CACHED */))
]),
footer: (0, vue_1.withCtx)(() => [
_cache[23] || (_cache[23] = (0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "tree-presentation-footer"
}, "禁用项保持禁用", -1 /* CACHED */))
]),
empty: (0, vue_1.withCtx)(() => [
_cache[24] || (_cache[24] = (0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "tree-presentation-empty"
}, "未找到树节点", -1 /* CACHED */))
]),
default: (0, vue_1.withCtx)(({ data, node, option }) => [
(0, vue_1.createElementVNode)("span", {
"data-tree-presentation-key": data.value,
"data-leaf": node.isLeaf,
"data-original-id": option?.raw.id
}, (0, vue_1.toDisplayString)(data.label), 9 /* TEXT, PROPS */, _hoisted_3)
]),
"suggestion-item": (0, vue_1.withCtx)(({ item }) => [
(0, vue_1.createElementVNode)("span", _hoisted_4, (0, vue_1.toDisplayString)(item.text) + " 完整树搜索结果 ", 1 /* TEXT */)
]),
_: 2 /* DYNAMIC */
}, [
(customTag.value)
? {
name: "tag",
fn: (0, vue_1.withCtx)(({ data, deleteTag }) => [
(0, vue_1.createElementVNode)("div", _hoisted_5, [
(0, vue_1.createElementVNode)("span", null, "已选 " + (0, vue_1.toDisplayString)(data.length) + " 项", 1 /* TEXT */),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: disabled.value || !data.length,
onClick: $event => (deleteTag(data[0]))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[25] || (_cache[25] = [
(0, vue_1.createTextVNode)(" 删除树首个标签 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])
])
]),
key: "0"
}
: undefined
]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "data-source", "disabled", "props", "show-checked-strategy", "virtual-scroll", "fit-input-width"]),
(0, vue_1.createElementVNode)("pre", _hoisted_6, (0, vue_1.toDisplayString)(JSON.stringify({
value: value.value,
removed: removed.value,
strict: strict.value,
disabled: disabled.value,
customTag: customTag.value,
parentStrategy: parentStrategy.value,
virtual: virtual.value,
fitWidth: fitWidth.value,
checkedKeys: checkedKeys.value
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-b36baf89";
},
"provider.js": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.members = void 0;
exports.members = [
{
id: 'team',
label: '研发组',
value: 'team',
children: [
{ id: 'alpha', label: 'Alpha', value: 'alpha' },
{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },
{ id: 'beta', label: 'Beta', value: 'beta' }
]
},
{
id: 'large',
label: '大型分组',
value: 'large',
children: Array.from({ length: 200 }, (_, index) => ({
id: 'member-' + index,
label: '成员 ' + index,
value: 'member-' + index
}))
}
];
},
};
const __dependencies = {"Demo.vue":{"./provider.js":"provider.js"},"provider.js":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.demo-layout-1[data-v-b36baf89] {
display: grid;
gap: var(--asam-space-md);
}
.demo-layout-2[data-v-b36baf89] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
p[data-v-b36baf89]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>局部请求错误插槽
可选 error 插槽仅在当前请求错误存在时调用，接收只读 { error, stale, retry }。 完整说明。
retry 不接收参数，返回强制 reload 的 Promise，并遵守取消和卸载规则。 完整说明。
提供该插槽时，自有内容替换整个默认局部错误区；返回空内容也表示主动替换。 未提供时继续显示原错误文字、过期提示和默认重试按钮。无 error 的单独 stale 状态 不调用此插槽；empty、loading 和其他基础插槽继续使用原作用域。
以下完整 TS/JS 示例先制造失败，再等待插槽 retry 的返回结果；成功后可再次制造 更新失败，观察旧结果与模型保留。每次挂载使用独立子 app 和本地 provider。
局部错误定制、等待重试与过期恢复
vue
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const Child_vue_1: any = __importDefault(require("./Child.vue"));
const transport_js_1: any = require("./transport.js");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamRemoteCascaderDemoLocalErrorExample' },
__name: 'Demo',
setup(__props?: any) {
const host: any = (0, vue_3.ref)();
let app: any;
(0, vue_3.onMounted)(() => {
if (!host.value)
return;
const transport: any = (0, transport_js_1.createTransport)();
app = (0, vue_3.createApp)(Child_vue_1.default, { transport });
(0, ui_1.provideAsamData)(app, transport.provider, { scope: 'AsamRemoteCascader-local-error' });
app.mount(host.value);
});
(0, vue_3.onBeforeUnmount)(() => app?.unmount());
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", {
ref_key: "host",
ref: host
}, null, 512 /* NEED_PATCH */));
};
}
});
},
"Child.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "demo-spacing-1" };
const _hoisted_2: any = {
role: "alert",
"data-testid": "local-error"
};
const _hoisted_3: any = { class: "example-paragraph" };
const _hoisted_4: any = {
key: 0,
class: "example-paragraph"
};
const _hoisted_5: any = {
class: "example-paragraph",
role: "status",
"data-testid": "retry-result"
};
const _hoisted_6: any = {
class: "example-paragraph",
"data-testid": "transport-count"
};
const _hoisted_7: any = { "data-testid": "local-model" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamRemoteCascaderChildLocalErrorExample' },
__name: 'Child',
props: {
transport: { type: null, required: true }
},
setup(__props?: any) {
const props: any = __props;
const transport: any = props.transport;
const value: any = (0, vue_3.ref)(null);
const control: any = (0, vue_3.ref)();
const busy: any = (0, vue_3.ref)(false), result: any = (0, vue_3.ref)('');
const dataSource: any = (0, ui_1.defineAsamOptions)().api({
api: transport.api,
params: undefined,
transform: (rows?: any) => rows,
fieldNames: { label: 'label', value: 'value' }
});
(0, vue_3.onMounted)(async () => {
const response: any = await control.value?.reload();
result.value = response?.status ?? 'cancelled';
});
async function recover(retry?: any) {
busy.value = true;
transport.failing.value = false;
try {
const response: any = await retry();
result.value = response.status;
}
finally {
busy.value = false;
}
}
async function failAgain() {
busy.value = true;
transport.failing.value = true;
try {
const response: any = await control.value?.reload({ force: true });
result.value = response?.status ?? 'cancelled';
}
finally {
busy.value = false;
}
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamRemoteCascader), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((value).value = $event)),
"data-source": (0, vue_2.unref)(dataSource),
immediate: false
}, {
error: (0, vue_2.withCtx)(({ error, stale, retry }: any) => [
(0, vue_2.createElementVNode)("div", _hoisted_2, [
(0, vue_2.createElementVNode)("p", _hoisted_3, (0, vue_2.toDisplayString)(error.message) + "（" + (0, vue_2.toDisplayString)(error.kind) + "）", 1 /* TEXT */),
stale
? ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("p", _hoisted_4, "已保留上次成功结果。"))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: busy.value,
onClick: ($event?: any) => (recover(retry))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[1] || (_cache[1] = [
(0, vue_2.createTextVNode)(" 恢复并重试 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])
])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue", "data-source"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: busy.value,
onClick: failAgain
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_2.createTextVNode)("模拟更新失败", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled"]),
(0, vue_2.createElementVNode)("p", _hoisted_5, (0, vue_2.toDisplayString)(result.value), 1 /* TEXT */),
(0, vue_2.createElementVNode)("p", _hoisted_6, " 请求 " + (0, vue_2.toDisplayString)((0, vue_2.unref)(transport).calls.value) + " 次，字典刷新 " + (0, vue_2.toDisplayString)((0, vue_2.unref)(transport).refreshes.value) + " 次 ", 1 /* TEXT */),
(0, vue_2.createElementVNode)("pre", _hoisted_7, (0, vue_2.toDisplayString)(value.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-80e0043a";
},
"transport.ts": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createTransport = createTransport;
const vue_1: any = require("vue");
function createTransport() {
const failing: any = (0, vue_1.ref)(true), calls: any = (0, vue_1.ref)(0), refreshes: any = (0, vue_1.ref)(0);
const api: any = async () => {
calls.value++;
if (failing.value)
throw Error('演示请求暂不可用');
return [
{ id: 1, value: 'ready', label: '准备' },
{ id: 2, value: 'running', label: '进行' }
];
};
const provider: any = {
dict: {
get: async (_type?: any, context?: any) => {
context.signal.throwIfAborted();
return api();
},
refresh: async (context?: any) => {
context.signal.throwIfAborted();
refreshes.value++;
}
}
};
return { failing, calls, refreshes, api, provider };
}
},
};
const __dependencies: any = {"Demo.vue":{"./Child.vue":"Child.vue","./transport.js":"transport.ts"},"Child.vue":{"./transport.js":"transport.ts"},"transport.ts":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.demo-spacing-1[data-v-80e0043a] {
display: grid;
gap: var(--asam-space-md);
}
p[data-v-80e0043a]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const Child_vue_1 = __importDefault(require("./Child.vue"));
const transport_js_1 = require("./transport.js");
exports.default = Object.assign({ name: 'AsamRemoteCascaderDemoLocalErrorExample' }, {
__name: 'Demo',
setup(__props) {
const host = (0, vue_2.ref)();
let app;
(0, vue_2.onMounted)(() => {
if (!host.value)
return;
const transport = (0, transport_js_1.createTransport)();
app = (0, vue_2.createApp)(Child_vue_1.default, { transport });
(0, ui_1.provideAsamData)(app, transport.provider, { scope: 'AsamRemoteCascader-local-error' });
app.mount(host.value);
});
(0, vue_2.onBeforeUnmount)(() => app?.unmount());
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", {
ref_key: "host",
ref: host
}, null, 512 /* NEED_PATCH */));
};
}
});
},
"Child.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "demo-spacing-1" };
const _hoisted_2 = {
role: "alert",
"data-testid": "local-error"
};
const _hoisted_3 = { class: "example-paragraph" };
const _hoisted_4 = {
key: 0,
class: "example-paragraph"
};
const _hoisted_5 = {
class: "example-paragraph",
role: "status",
"data-testid": "retry-result"
};
const _hoisted_6 = {
class: "example-paragraph",
"data-testid": "transport-count"
};
const _hoisted_7 = { "data-testid": "local-model" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = Object.assign({ name: 'AsamRemoteCascaderChildLocalErrorExample' }, {
__name: 'Child',
props: { transport: { type: Object, required: true } },
setup(__props) {
const props = __props;
const transport = props.transport;
const value = (0, vue_2.ref)(null);
const control = (0, vue_2.ref)();
const busy = (0, vue_2.ref)(false), result = (0, vue_2.ref)('');
const dataSource = (0, ui_1.defineAsamOptions)().api({ api: transport.api, params: undefined });
(0, vue_2.onMounted)(async () => {
const response = await control.value?.reload();
result.value = response?.status ?? 'cancelled';
});
async function recover(retry) {
busy.value = true;
transport.failing.value = false;
try {
const response = await retry();
result.value = response.status;
}
finally {
busy.value = false;
}
}
async function failAgain() {
busy.value = true;
transport.failing.value = true;
try {
const response = await control.value?.reload({ force: true });
result.value = response?.status ?? 'cancelled';
}
finally {
busy.value = false;
}
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamRemoteCascader), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((value).value = $event)),
"data-source": (0, vue_1.unref)(dataSource),
immediate: false
}, {
error: (0, vue_1.withCtx)(({ error, stale, retry }) => [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
(0, vue_1.createElementVNode)("p", _hoisted_3, (0, vue_1.toDisplayString)(error.message) + "（" + (0, vue_1.toDisplayString)(error.kind) + "）", 1 /* TEXT */),
stale
? ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("p", _hoisted_4, "已保留上次成功结果。"))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: busy.value,
onClick: $event => (recover(retry))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[1] || (_cache[1] = [
(0, vue_1.createTextVNode)(" 恢复并重试 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])
])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue", "data-source"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: busy.value,
onClick: failAgain
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_1.createTextVNode)("模拟更新失败", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled"]),
(0, vue_1.createElementVNode)("p", _hoisted_5, (0, vue_1.toDisplayString)(result.value), 1 /* TEXT */),
(0, vue_1.createElementVNode)("p", _hoisted_6, " 请求 " + (0, vue_1.toDisplayString)((0, vue_1.unref)(transport).calls.value) + " 次，字典刷新 " + (0, vue_1.toDisplayString)((0, vue_1.unref)(transport).refreshes.value) + " 次 ", 1 /* TEXT */),
(0, vue_1.createElementVNode)("pre", _hoisted_7, (0, vue_1.toDisplayString)(value.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-b9d1fbee";
},
"transport.js": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createTransport = createTransport;
const vue_1 = require("vue");
function createTransport() {
const failing = (0, vue_1.ref)(true), calls = (0, vue_1.ref)(0), refreshes = (0, vue_1.ref)(0);
const api = async () => {
calls.value++;
if (failing.value)
throw Error('演示请求暂不可用');
return [
{ id: 1, value: 'ready', label: '准备' },
{ id: 2, value: 'running', label: '进行' }
];
};
const provider = {
dict: {
get: async (_type, context) => {
context.signal.throwIfAborted();
return api();
},
refresh: async (context) => {
context.signal.throwIfAborted();
refreshes.value++;
}
}
};
return { failing, calls, refreshes, api, provider };
}
},
};
const __dependencies = {"Demo.vue":{"./Child.vue":"Child.vue","./transport.js":"transport.js"},"Child.vue":{},"transport.js":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.demo-spacing-1[data-v-b9d1fbee] {
display: grid;
gap: var(--asam-space-md);
}
p[data-v-b9d1fbee]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>局部与全局浮层
基础示例使用默认的全局挂载；局部挂载示例展示显式配置的 teleported 或 appendTo。先打开控件浮层，再观察其所在容器。挂载位置与控件值、请求协议互相独立。
API
属性 AsamRemoteCascaderProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
effect | Tooltip 主题，内置了 dark / light 两种 | enum"light" | "dark"完整类型：(AsamRemoteCascaderProps<V, I, P, R>)["effect"] | — |
popperClass | 级联下拉面板的自定义类名。 | (AsamRemoteCascaderProps<V, I, P, R>)["popperClass"] | — |
popperStyle | 级联下拉面板的自定义样式。 | (AsamRemoteCascaderProps<V, I, P, R>)["popperStyle"] | — |
fallbackPlacements | 下拉面板可采用的位置列表。 | (AsamRemoteCascaderProps<V, I, P, R>)["fallbackPlacements"] | — |
placement | 下拉框出现的位置 | enum"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"完整类型：(AsamRemoteCascaderProps<V, I, P, R>)["placement"] | — |
persistent | 当下拉框未被激活并且persistent设置为false，下拉框容器会被删除。 | boolean | undefined | — |
teleported | 弹层是否使用 teleport | boolean | undefined | false |
disabled | 指定选项的禁用为选项对象的某个属性值 | boolean | undefined | false |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
height | 虚拟滚动菜单高度。 | number | undefined | — |
itemSize | 虚拟滚动节点高度。 | number | undefined | — |
separator | 用于分隔选项的字符 | string | undefined | — |
modelValue | — | 查看完整类型string | undefined | V | null | undefined | AsamHierarchyOption<V, I> | null | undefined | readonly V[] | undefined | readonly AsamHierarchyOption<V, I>[] | undefined | false |
filterMethod | 自定义搜索逻辑，第一个参数是node，第二个参数是keyword，返回的布尔值表示是否保留该选项 | ((node: AsamCascaderNode, keyword: string) => boolean) | undefined | — |
checkOnClickNode | 点击节点时是否选中或取消选中该节点 | boolean | undefined | — |
multiple | — | true | false | undefined | true | undefined | false |
valueMode | — | enum"value" | "object"完整类型："value" | undefined | "object" | — |
multipleValueMode | — | enum"string" | "array"完整类型："string" | undefined | "array" | undefined | — |
emptyValues | 组件支持的空值集合。 | unknown[] | undefined | — |
valueOnClear | 清空时返回的值；需要 undefined 时使用 () => undefined。 | (AsamRemoteCascaderProps<V, I, P, R>)["valueOnClear"] | — |
validateEvent | 是否触发表单验证 | boolean | undefined | — |
virtualScroll | 是否为大数据启用虚拟滚动 | boolean | undefined | — |
clearable | 是否支持清空选项 | boolean | undefined | false |
clearIcon | 自定义清除图标 | (AsamRemoteCascaderProps<V, I, P, R>)["clearIcon"] | — |
placeholder | 输入框占位文本 | string | undefined | — |
filterable | 该选项是否可以被搜索 | boolean | undefined | false |
debounce | 搜索关键词正在输入时的去抖延迟，单位为毫秒 | number | undefined | — |
collapseTags | 多选模式下是否折叠Tag | boolean | undefined | — |
collapseTagsTooltip | 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。要使用此功能，collapse-tags的值必须为true | boolean | undefined | — |
maxCollapseTags | 需要显示的 Tag 的最大数量。只有当 collapse-tags 设置为 true 时才会生效。 | number | undefined | — |
fitInputWidth | 建议面板的宽度是否与输入框一致；如果值为 number，则宽度为固定值。 | number | boolean | undefined | — |
tagType | 标签类型 | enum"primary" | "success" | "danger" | "warning" | "info"完整类型："primary" | "success" | "danger" | "warning" | "info" | undefined | — |
tagEffect | 标签效果 | enum"light" | "dark" | "plain"完整类型："light" | "dark" | "plain" | undefined | — |
showAllLevels | 输入框中是否显示选中值的完整路径 | boolean | undefined | — |
maxCollapseTagsTooltipHeight | 折叠标签提示的最大像素高度，需要启用 collapse-tags-tooltip。 | string | number | undefined | — |
beforeFilter | 过滤函数调用前，所要调用的钩子函数，该函数接收要过滤的值作为参数。如果该函数的返回值是 false 或者是一个被拒绝的 Promise，那么接下来的过滤逻辑便不会执行。 | ((value: string) => boolean | Promise<any>) | undefined | — |
showCheckedStrategy | parent 策略适合显示汇总父项；child 策略适合逐项展示所选子节点。 | enum"parent" | "child"完整类型："parent" | "child" | undefined | — |
showPrefix | 是否显示单选框或复选框的前缀（图标） | boolean | undefined | — |
props | — | Omit<AsamCascaderNativeConfig, "lazy" | "lazyLoad"> | undefined | — |
immediate | — | boolean | undefined | true |
active | — | boolean | undefined | true |
dataSource | — | AsamOptionsSource<V, I, "api" | "request"> | undefined | — |
api | — | undefined | AsamApiRequest<P, R> | — |
request | — | undefined | AsamRequestConfig | — |
params | — | undefined | P | — |
transform | — | undefined | ((response: R) => readonly I[]) | undefined | ((response: unknown) => readonly I[]) | undefined | — |
fieldNames | — | undefined | AsamMapping | undefined | — |
cache | — | undefined | AsamOptionsCache | undefined | — |
事件 AsamCascaderDataEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
clear | — | (AsamCascaderDataEmits<V, I>)["clear"] | — |
focus | — | [event: FocusEvent] | — |
success | — | [data: readonly AsamOption<V, I>[]] | — |
change | — | [value: string | V | AsamOption<V, I> | readonly AsamOption<V, I>[] | readonly V[] | null] | — |
error | — | [error: AsamDataError] | — |
update:modelValue | — | [value: string | V | AsamOption<V, I> | readonly AsamOption<V, I>[] | readonly V[] | null] | — |
blur | — | [event: FocusEvent] | — |
visibleChange | — | [visible: boolean] | — |
expandChange | — | (AsamCascaderDataEmits<V, I>)["expandChange"] | — |
removeTag | — | (AsamCascaderDataEmits<V, I>)["removeTag"] | — |
插槽 AsamCascaderDataSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
tag | — | ((scope: { data: AsamCascaderTag[]; deleteTag: (tag: AsamCascaderTag) => void; }) => unknown) | undefined | — |
prefix | — | (() => unknown) | undefined | — |
footer | — | (() => unknown) | undefined | — |
header | — | (() => unknown) | undefined | — |
empty | — | (() => unknown) | undefined | — |
suggestion-item | — | ((scope: { item: AsamCascaderNode; }) => unknown) | undefined | — |
error | 替换本地错误区域；重试返回现有强制重新加载的 Promise。 | (AsamCascaderDataSlots<V, I>)["error"] | — |
default | — | 查看完整类型((scope: Omit<{ option?: AsamHierarchyOption; data: AsamCascaderOption; node: AsamCascaderNode; }, "option"> & { option: AsamOption<V, I> | undefined; }) => unknown) | undefined | — |
实例方法与状态 AsamRemoteCascaderExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
focus | — | () => void | — |
getCheckedNodes | 获取一个当前选中节点的数组。(仅仅是传单) 是否只返回叶选中的节点，默认是 false | (leafOnly: boolean) => AsamCascaderNode[] | undefined | — |
contentRef | cascader 内容的 ref | HTMLElement | undefined | — |
blur | — | () => void | — |
cascaderPanelRef | cascader 面板的 ref | (AsamRemoteCascaderExpose<V, I>)["cascaderPanelRef"] | — |
togglePopperVisible | 切换浮层可见状态。 | (visible?: boolean) => void | — |
presentText | 选中的内容文本 | string | — |
reload | — | (options?: { readonly force?: boolean; }) => Promise<AsamReloadResult<readonly AsamOption<V, I>[]>> | — |
cancel | — | () => void | — |
用法与契约补充说明
数据来源与覆盖
dataSource、api + params、request 三种来源只选一种。dataSource 必须由 defineAsamOptions 创建，使用该来源时映射、转换和缓存配置写在工厂内，不再重复传短来源属性。自定义字段映射同时提供同步 transform；API 返回 Promise，并检查 context.signal。
数据来源与覆盖
对象单选清空统一发布 null；合法原生 valueOnClear 为 false 或 0、且 emptyValues 包含该值时，也保留 update:modelValue、change 与 clear 事件。多选清空发布空数组。 合法清空回调返回 [] 或 [null]、且 emptyValues 包含对应数组时，对象单选同样 发布 null；原生清空数组不会进入公开的单对象模型。 实际值为 0 或 false 的业务节点仍保存完整 AsamOption 和 raw，不当成清空值； 原生实例的节点键分别为 number:0、boolean:false，与原生清空返回值区分。
生命周期、事件与实例
active=false 暂停请求并保留上次成功数据；reload({ force: true }) 请求新数据，cancel() 取消当前请求。success 返回规范化选项数组，error 返回 AsamDataError；旧成功数据更新失败时组件显示过期状态。reload 的 status 为 success、error 或 cancelled；不能把取消当作成功。
完整树与对象多选
示例一次返回完整组织树，使用 multiple 与 valueMode=object 保存规范化对象及 raw 成员；禁用成员不能勾选。展示节点、header/footer、过滤、清空、原生 getCheckedNodes、刷新失败的旧数据保留与取消慢请求。读取节点时只保存数量，避免序列化级联节点的循环引用。API 在演示内部运行，传递 AbortSignal 并检查取消。 不包含节点懒加载。
完整树与对象多选
示例逐次保存 update:modelValue、change、success 和 error 的载荷快照：模型与成功结果保留规范化对象及原始 raw 树；失败记录错误种类和消息。default 读取规范化 option.raw 与原生 data.label，header/footer 直接展示内容。取消请求不会伪造一次成功事件，失败刷新不清空调用方模型。
层级展示与勾选策略
完整示例使用原始字符串数组模型；数据来源一次提供完整树，保留禁用节点，并通过 default 插槽读取节点 data/node 和规范化 option.raw。折叠标签显示实际提示，自定义 tag 通过原生 deleteTag 回调删除，removeTag 原样转发基础组件的原生事件载荷；模型仍保留原始标量值。禁用后不能删除或勾选。checkStrictly 控制父节点是否独立选择，读取公开勾选实例只序列化键，避免节点循环引用。原生实例和原生节点事件使用节点键，取 default 插槽的 data.value 或 getCheckedNodes(false) 返回节点的 value；业务值取 v-model 或 option.value，不能直接把业务模型值当作原生实例键。showCheckedStrategy 设置 parent/child 标签显示策略，virtualScroll 用于大型分组的现有完整子树；fitInputWidth 配置过滤后的搜索面板：数字固定宽度，true 与输入同宽，false 使用自然宽度并保留输入宽度的最小值。常规多列树面板的宽度不能作为此属性的证据。示例在搜索框输入“成员”后可切换三种宽度，并用 suggestion-item 定制完整树匹配结果。虚拟渲染不会添加 lazy/lazyLoad 数据请求。
层级展示与勾选策略
示例明确设置 height=180、itemSize=30、fitInputWidth=360。height 传入 AsamCascader 的原生虚拟列表；本站固定原生版本 2.14.7 当前样式的上下 margin 各为 6px，min-height 与父级伸展使实际视口为 192px，不能把 height 当成包含全部外部样式的固定面板高度。完整树的 200 个子节点只渲染可视窗口，关闭 virtualScroll 后渲染全部子节点。
局部请求错误插槽
可选 error 插槽仅在当前请求错误存在时调用，接收只读 { error, stale, retry }。
error 与本实例 error 事件中的 AsamDataError 为同一对象，保留 cause、kind、
message 与 notified；渲染插槽不会再次通知 provider。stale 表示保留的数据已过期。
更多参数与事件说明
局部请求错误插槽
retry() 不接收参数，直接返回现有 reload({ force: true }) 的 Promise，结果为
AsamReloadResult<readonly AsamOption<V, I>[]> 的 success、error 或 cancelled 分支。
重试遵守 active、当前来源、取消和卸载规则，不改写模型。
继承能力
本入口的独有 API 见上表，基础能力见本站对应页面。
关联组件
参数与事件补充说明
组合契约按分支生效；请同时查看公开类型。
参数与事件说明
effect
必填：否；声明来源：上游声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark"
默认值与来源
未知 / 未声明固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'light'（2.14.7；源码事实，未作为 ASAM 运行实测）
popperClass
必填：否；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperStyle
必填：否；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
fallbackPlacements
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：['bottom-start', 'bottom', 'top-start', 'top', 'right', 'left']（2.14.7；源码事实，未作为 ASAM 运行实测）
placement
必填：否；声明来源：上游声明。
placement 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："auto" / "auto-start" / "auto-end" / "top" / "bottom" / "right" / "left" / "top-start" / "top-end" / "bottom-start" / "bottom-end" / "right-start" / "right-end" / "left-start" / "left-end"
默认值与来源
未知 / 未声明固定上游文档默认：bottom-start（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'bottom-start'（2.14.7；源码事实，未作为 ASAM 运行实测）
persistent
必填：否；声明来源：上游声明。
persistent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
teleported
必填：否；声明来源：ASAM 声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
height
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：204（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：CASCADER_PANEL_HEIGHT（2.14.7；源码事实，未作为 ASAM 运行实测）
itemSize
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：34（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：CASCADER_PANEL_ITEM_SIZE（2.14.7；源码事实，未作为 ASAM 运行实测）
separator
必填：否；声明来源：ASAM 声明。
modelValue
必填：否；声明来源：ASAM 声明。
默认值与来源
false（隐式 Boolean 默认；已安装组件）filterMethod
必填：否；声明来源：上游声明。
filterMethod 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(node: AsamCascaderNode, keyword: string): boolean
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码函数默认值（作为值，不执行）：(node: CascaderNode, keyword: string) =>
node.text.includes(keyword)（2.14.7；源码事实，未作为 ASAM 运行实测）
checkOnClickNode
必填：否；声明来源：上游声明。
checkOnClickNode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
multiple
必填：否；声明来源：ASAM 声明。
multiple 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：true
枚举：false
枚举：true
默认值与来源
false（隐式 Boolean 默认；已安装组件）valueMode
必填：否；声明来源：ASAM 声明。
valueMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："value"
枚举："object"
multipleValueMode
必填：否；声明来源：ASAM 声明。
multipleValueMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："string"
枚举："array"
emptyValues
必填：否；声明来源：上游声明。
valueOnClear
必填：否；声明来源：上游声明。
valueOnClear 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
valueOnClear.apply:(this: Function, thisArg: any, argArray?: any) => any— 依赖声明调用函数，以指定对象作为 this，并使用指定数组作为函数参数。
事件参数：
(this: Function, thisArg: any, argArray?: any): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.call:(this: Function, thisArg: any, ...argArray: any[]) => any— 依赖声明调用对象方法，并以另一个对象作为当前 this。
事件参数：
(this: Function, thisArg: any, ...argArray: any[]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.bind:(this: Function, thisArg: any, ...argArray: any[]) => any— 依赖声明创建具有相同函数体的绑定函数，将 this 绑定到指定对象，并设置初始参数。
事件参数：
(this: Function, thisArg: any, ...argArray: any[]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.toString:() => string— 依赖声明返回函数的字符串表示。
事件参数：
(): string嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.prototype:any— 依赖声明valueOnClear.length:number— 依赖声明valueOnClear.arguments:any— 依赖声明valueOnClear.caller:Function— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.name:string— 依赖声明返回函数名称；函数名称只读，不能修改。
valueOnClear.__@hasInstance@8888:(value: any) => boolean— 依赖声明当函数用作构造函数时，判断指定值是否继承自该函数；构造函数可以覆盖此方法，控制 instanceof 对实例的识别。
事件参数：
(value: any): boolean嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
validateEvent
必填：否；声明来源：上游声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
virtualScroll
必填：否；声明来源：上游声明。
virtualScroll 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearable
必填：否；声明来源：ASAM 声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）clearIcon
必填：否；声明来源：上游声明。
clearIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamRemoteCascaderProps<V, I, P, R>)["clearIcon"]>, (...args: never[]) => unknown>>[1]): any
clearIcon.__isFragment:undefined— 依赖声明clearIcon.__isTeleport:undefined— 依赖声明clearIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：CircleClose（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：CircleClose（2.14.7；源码事实，未作为 ASAM 运行实测）
placeholder
必填：否；声明来源：ASAM 声明。
filterable
必填：否；声明来源：ASAM 声明。
filterable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）debounce
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：300（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：300（2.14.7；源码事实，未作为 ASAM 运行实测）
collapseTags
必填：否；声明来源：上游声明。
collapseTags 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
collapseTagsTooltip
必填：否；声明来源：上游声明。
collapseTagsTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
maxCollapseTags
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：1（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：1（2.14.7；源码事实，未作为 ASAM 运行实测）
fitInputWidth
必填：否；声明来源：上游声明。
fitInputWidth 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：false（2.14.7；源码事实，未作为 ASAM 运行实测）
tagType
必填：否；声明来源：上游声明。
tagType 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："primary" / "success" / "danger" / "warning" / "info"
默认值与来源
未知 / 未声明固定上游文档默认：info（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tagEffect
必填：否；声明来源：上游声明。
tagEffect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark" / "plain"
默认值与来源
未知 / 未声明固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showAllLevels
必填：否；声明来源：上游声明。
showAllLevels 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
maxCollapseTagsTooltipHeight
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
beforeFilter
必填：否；声明来源：上游声明。
beforeFilter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: string): boolean | Promise<any>
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码函数默认值（作为值，不执行）：() => true（2.14.7；源码事实，未作为 ASAM 运行实测）
showCheckedStrategy
必填：否；声明来源：上游声明。
showCheckedStrategy 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："parent" / "child"
默认值与来源
未知 / 未声明固定上游文档默认：child（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'child'（2.14.7；源码事实，未作为 ASAM 运行实测）
showPrefix
必填：否；声明来源：上游声明。
showPrefix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
props
必填：否；声明来源：数据 / provider 协议。
props 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
props.disabled:PublicMember<NonNullable<Omit<AsamCascaderNativeConfig, "lazy" | "lazyLoad"> | undefined>, "disabled">— 上游声明事件参数：
(data: AsamCascaderOption, node: AsamCascaderNode): booleanprops.value:string | undefined— 上游声明props.label:string | undefined— 上游声明props.checkStrictly:boolean | undefined— 上游声明枚举：
false/trueprops.checkOnClickNode:boolean | undefined— 上游声明枚举：
false/trueprops.checkOnClickLeaf:boolean | undefined— 上游声明枚举：
false/trueprops.multiple:boolean | undefined— 上游声明枚举：
false/trueprops.showPrefix:boolean | undefined— 上游声明枚举：
false/trueprops.expandTrigger:PublicMember<NonNullable<Omit<AsamCascaderNativeConfig, "lazy" | "lazyLoad"> | undefined>, "expandTrigger">— 上游声明枚举：
"hover"/"click"props.emitPath:boolean | undefined— 上游声明枚举：
false/trueprops.children:string | undefined— 上游声明props.leaf:PublicMember<NonNullable<Omit<AsamCascaderNativeConfig, "lazy" | "lazyLoad"> | undefined>, "leaf">— 上游声明事件参数：
(data: AsamCascaderOption, node: AsamCascaderNode): booleanprops.hoverThreshold:number | undefined— 上游声明
immediate
必填：否；声明来源：数据 / provider 协议。
immediate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（源码表达式；ASAM 声明）active
必填：否；声明来源：数据 / provider 协议。
active 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（源码表达式；ASAM 声明）dataSource
必填：否；声明来源：数据 / provider 协议。
dataSource 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
dataSource.kind:"api" | "request"— 数据 / provider 协议枚举：
"api"/"request"dataSource.__@sourceBrand@58165:{ readonly value: V; readonly raw: I; }— 数据 / provider 协议dataSource.__@sourceBrand@58165.value:V— 数据 / provider 协议dataSource.__@sourceBrand@58165.raw:I— 数据 / provider 协议
api
必填：否；声明来源：数据 / provider 协议。
api 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(params: P, context: AsamRequestContext): Promise<R>
request
必填：否；声明来源：数据 / provider 协议。
request 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
request.url:string— 数据 / provider 协议request.method:"delete" | "get" | "post" | "put" | undefined— 数据 / provider 协议枚举：
"delete"/"get"/"post"/"put"request.params:Readonly<Record<string, unknown>> | undefined— 数据 / provider 协议request.data:unknown— 数据 / provider 协议
params
必填：否；声明来源：数据 / provider 协议。
transform
必填：否；声明来源：数据 / provider 协议。
transform 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(response: R): readonly I[]
事件参数：(response: unknown): readonly I[]
fieldNames
必填：否；声明来源：数据 / provider 协议。
fieldNames 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
fieldNames.label:string— 数据 / provider 协议fieldNames.value:string— 数据 / provider 协议fieldNames.disabled:string | undefined— 数据 / provider 协议fieldNames.children:string | undefined— 数据 / provider 协议
cache
必填：否；声明来源：数据 / provider 协议。
cache 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
cache.ttlMs:number— 数据 / provider 协议cache.key:((requestInput: unknown) => string) | undefined— 数据 / provider 协议事件参数：
(requestInput: unknown): string
AsamRemoteCascaderProps 公开类型视图
ts
import type { Attrs } from 'vue';
import type { AsamRemoteCascaderProps, AsamValue, AsamRecord, AsamHierarchyRuntimeProps, AsamControlSize, AsamCascaderNode, AsamCascaderNativeConfig, AsamCascaderOption, AsamOptionsSource, AsamApiRequest, AsamRequestContext, AsamMapping, AsamOptionsCache, AsamRequestConfig, AsamHierarchyOption } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamRemoteCascaderProps
type PublicContract<V extends AsamValue = AsamValue, I extends object = AsamRecord, P = unknown, R = unknown> = AsamRemoteCascaderProps<V, I, P, R>;只承接 Cascader 基础事件；此入口不接收 Tree 的拖拽、放置、勾选或滚动事件。
参数与事件说明
clear
必填：是；声明来源：ASAM 声明。
focus
必填：是；声明来源：ASAM 声明。
success
必填：是；声明来源：数据 / provider 协议。
change
必填：是；声明来源：数据 / provider 协议。
error
必填：是；声明来源：数据 / provider 协议。
update:modelValue
必填：是；声明来源：数据 / provider 协议。
blur
必填：是；声明来源：ASAM 声明。
visibleChange
必填：是；声明来源：ASAM 声明。
expandChange
必填：是；声明来源：ASAM 声明。
removeTag
必填：是；声明来源：ASAM 声明。
AsamCascaderDataEmits 公开类型视图
ts
import type { AsamCascaderDataEmits, AsamValue, AsamHierarchyEmits, AsamOption, AsamDataError } from '@asam-ui/ui';
// AsamCascaderDataEmits
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
"clear": (AsamCascaderDataEmits<V, I>)["clear"];
"focus": [event: FocusEvent];
"success": [data: readonly AsamOption<V, I>[]];
"change": [value: string | V | AsamOption<V, I> | readonly AsamOption<V, I>[] | readonly V[] | null];
"error": [error: AsamDataError];
"update:modelValue": [value: string | V | AsamOption<V, I> | readonly AsamOption<V, I>[] | readonly V[] | null];
"blur": [event: FocusEvent];
"visibleChange": [visible: boolean];
"expandChange": (AsamCascaderDataEmits<V, I>)["expandChange"];
"removeTag": (AsamCascaderDataEmits<V, I>)["removeTag"];
};参数与事件说明
tag
必填：否；声明来源：ASAM 声明。
tag 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { data: AsamCascaderTag[]; deleteTag: (tag: AsamCascaderTag) => void; }): unknown
prefix
必填：否；声明来源：ASAM 声明。
prefix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
footer
必填：否；声明来源：ASAM 声明。
footer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
header
必填：否；声明来源：ASAM 声明。
header 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
empty
必填：否；声明来源：ASAM 声明。
empty 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
suggestion-item
必填：否；声明来源：ASAM 声明。
suggestion-item 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { item: AsamCascaderNode; }): unknown
error
必填：否；声明来源：数据 / provider 协议。
error 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: Parameters<Extract<NonNullable<(AsamCascaderDataSlots<V, I>)["error"]>, (...args: never[]) => unknown>>[0]): unknown
default
必填：否；声明来源：数据 / provider 协议。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: Omit<{ option?: AsamHierarchyOption; data: AsamCascaderOption; node: AsamCascaderNode; }, "option"> & { option: AsamOption<V, I> | undefined; }): unknown
AsamCascaderDataSlots 公开类型视图
ts
import type { AsamCascaderDataSlots, AsamValue, AsamCascaderTag, AsamCascaderNode, AsamDataError, AsamOption, AsamReloadResult, AsamHierarchyOption, AsamCascaderOption } from '@asam-ui/ui';
// AsamCascaderDataSlots
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
"tag"?: ((scope: { data: AsamCascaderTag[]; deleteTag: (tag: AsamCascaderTag) => void; }) => unknown) | undefined;
"prefix"?: (() => unknown) | undefined;
"footer"?: (() => unknown) | undefined;
"header"?: (() => unknown) | undefined;
"empty"?: (() => unknown) | undefined;
"suggestion-item"?: ((scope: { item: AsamCascaderNode; }) => unknown) | undefined;
"error"?: (AsamCascaderDataSlots<V, I>)["error"];
"default"?: ((scope: Omit<{ option?: AsamHierarchyOption; data: AsamCascaderOption; node: AsamCascaderNode; }, "option"> & { option: AsamOption<V, I> | undefined; }) => unknown) | undefined;
};参数与事件说明
focus
必填：是；声明来源：上游声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
getCheckedNodes
必填：是；声明来源：上游声明。
getCheckedNodes 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(leafOnly: boolean): AsamCascaderNode[] | undefined
contentRef
必填：是；声明来源：上游声明。
contentRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
blur
必填：是；声明来源：上游声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
cascaderPanelRef
必填：是；声明来源：上游声明。
togglePopperVisible
必填：是；声明来源：上游声明。
togglePopperVisible 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(visible?: boolean | undefined): void
presentText
必填：是；声明来源：上游声明。
reload
必填：是；声明来源：数据 / provider 协议。
reload 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(options?: { readonly force?: boolean; } | undefined): Promise<AsamReloadResult<readonly AsamOption<V, I>[]>>
cancel
必填：是；声明来源：数据 / provider 协议。
cancel 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamRemoteCascaderExpose 公开类型视图
ts
import type { AsamRemoteCascaderExpose, AsamValue, AsamCascaderNode, AsamHierarchyRuntimeProps, AsamOption, AsamReloadResult } from '@asam-ui/ui';
// AsamRemoteCascaderExpose
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
"focus": () => void;
"getCheckedNodes": (leafOnly: boolean) => AsamCascaderNode[] | undefined;
"contentRef": HTMLElement | undefined;
"blur": () => void;
"cascaderPanelRef": (AsamRemoteCascaderExpose<V, I>)["cascaderPanelRef"];
"togglePopperVisible": (visible?: boolean) => void;
"presentText": string;
"reload": (options?: { readonly force?: boolean; }) => Promise<AsamReloadResult<readonly AsamOption<V, I>[]>>;
"cancel": () => void;
};