远端树选择器
在树选择器上管理异步选项、重载和请求取消。
基础用法
示例通过本地 Promise 函数加载选项，支持模型更新、暂停与重载。所有请求都留在演示内部。
本地数据与生命周期
vue
<template>
<section class="data-demo">
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="active">启用请求</AsamCheckboxItem>
<AsamRemoteTreeSelect
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>
</AsamRemoteTreeSelect>
<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, AsamRemoteTreeSelect, defineAsamOptions } from '@asam-ui/ui';
import type { AsamRemoteTreeSelectExpose, AsamApiRequest } from '@asam-ui/ui';
defineOptions({ name: 'AsamRemoteTreeSelectBasicDemoExample' });
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<AsamRemoteTreeSelectExpose<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>
<AsamRemoteTreeSelect
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>
</AsamRemoteTreeSelect>
<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, AsamRemoteTreeSelect, defineAsamOptions } from '@asam-ui/ui';
defineOptions({ name: 'AsamRemoteTreeSelectBasicDemoExample' });
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 联合约束；对象模式不能使用字符串存储。切换值策略时同时调整模型类型。
层级来源一次返回完整树；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: 'AsamRemoteTreeSelectCompleteTreeDemo' },
__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.AsamRemoteTreeSelect), {
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,
"show-checkbox": "",
"render-after-expand": false,
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-75f3a4db";
},
"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-75f3a4db] {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.data-demo > p[data-v-75f3a4db],
.data-demo > pre[data-v-75f3a4db],
.data-demo > fieldset[data-v-75f3a4db] {
width: 100%;
min-width: 0;
margin: 0;
}
.demo-actions[data-v-75f3a4db] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
}
p[data-v-75f3a4db]: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: 'AsamRemoteTreeSelectCompleteTreeDemo' }, {
__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.AsamRemoteTreeSelect), {
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,
"show-checkbox": "",
"render-after-expand": false,
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-5fcfeac6";
},
"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-5fcfeac6] {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.data-demo > p[data-v-5fcfeac6],
.data-demo > pre[data-v-5fcfeac6],
.data-demo > fieldset[data-v-5fcfeac6] {
width: 100%;
min-width: 0;
margin: 0;
}
.demo-actions[data-v-5fcfeac6] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
}
p[data-v-5fcfeac6]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>数据入口的原生事件边界
沿用 TreeSelect 原生事件名与参数；选中模型由外层数据来源规范化。 完整说明。
层级展示与勾选策略
完整示例使用原始字符串数组模型；数据来源一次提供完整树，保留禁用节点，并通过 default 插槽读取节点 data/node 和规范化 option.raw。 完整说明。
点击 default 插槽内的“记住父节点键”保存原生 data.value，再使用 setChecked(key, true, deep) 的第三个参数。 完整说明。
checkStrictly=false 时，勾选父节点会按原生规则传播到可用子节点；checkStrictly=true 时父节点独立选择。两个模式保留原始业务值模型，原生实例仍使用节点键。deep 参数决定实例操作是否递归，不能用它替代整个控件的 checkStrictly 配置。
父级选择、标签和树实例
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-tag" };
const _hoisted_5: 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: 'AsamRemoteTreeSelectNativeTreePresentationDemo' },
__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 checkedKeys: any = (0, vue_3.ref)([]);
function inspect() {
checkedKeys.value = control.value?.getCheckedKeys(false) ?? [];
halfCheckedKeys.value = control.value?.getHalfCheckedKeys() ?? [];
}
const parentKey: any = (0, vue_3.ref)();
const parentData: any = (0, vue_3.shallowRef)();
const halfCheckedKeys: any = (0, vue_3.ref)([]);
function rememberKey(key?: any) {
if (typeof key !== 'string' && typeof key !== 'number')
throw new Error('Expected public native node key');
parentKey.value = key;
}
function rememberNode(data?: any) {
rememberKey(data.value);
parentData.value = data;
}
function clearChecked() {
control.value?.setCheckedKeys([], false);
inspect();
}
function checkParent(deep?: any) {
if (parentKey.value === undefined)
throw new Error('Tree source has not settled');
control.value?.setChecked(parentKey.value, true, deep);
inspect();
}
function checkDefault() {
if (parentKey.value === undefined)
throw new Error('Tree source has not settled');
control.value?.setChecked(parentKey.value, true);
inspect();
}
function checkData() {
if (!parentData.value)
throw new Error('Tree node data missing');
control.value?.setChecked(parentData.value, true, true);
inspect();
}
function uncheckData() {
if (!parentData.value)
throw new Error('Tree node data missing');
control.value?.setChecked(parentData.value, false, true);
inspect();
}
function checkAbsent() {
control.value?.setChecked(999, true, true);
inspect();
}
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[8] || (_cache[8] = [
(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[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: _cache[2] || (_cache[2] = ($event?: any) => (strict.value = !strict.value))
}, {
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: clearChecked
}, {
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[3] || (_cache[3] = ($event?: any) => (checkParent(false)))
}, {
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[4] || (_cache[4] = ($event?: any) => (checkParent(true)))
}, {
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: checkDefault
}, {
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: checkData
}, {
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: checkAbsent
}, {
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: uncheckData
}, {
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[5] || (_cache[5] = ($event?: any) => (value.value = ['alpha', 'beta']))
}, {
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: inspect
}, {
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.AsamRemoteTreeSelect), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[6] || (_cache[6] = ($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: "高级树展示",
"show-checkbox": "",
"check-strictly": strict.value,
"check-on-click-node": false,
"render-after-expand": false,
"popper-style": { minWidth: '360px' },
onRemoveTag: _cache[7] || (_cache[7] = ($event?: any) => (removed.value.push($event)))
}, (0, vue_2.createSlots)({
prefix: (0, vue_2.withCtx)(() => [
_cache[20] || (_cache[20] = (0, vue_2.createElementVNode)("span", { "data-testid": "tree-presentation-prefix" }, "树前缀", -1 /* CACHED */))
]),
header: (0, vue_2.withCtx)(() => [
_cache[21] || (_cache[21] = (0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "tree-presentation-header"
}, "完整层级来源", -1 /* CACHED */))
]),
footer: (0, vue_2.withCtx)(() => [
_cache[22] || (_cache[22] = (0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "tree-presentation-footer"
}, "禁用项保持禁用", -1 /* CACHED */))
]),
empty: (0, vue_2.withCtx)(() => [
_cache[23] || (_cache[23] = (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),
(option?.value === 'team')
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamButton), {
key: 0,
type: "default",
"native-type": "button",
onClick: (0, vue_2.withModifiers)(($event?: any) => (rememberNode(data)), ["stop"])
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[24] || (_cache[24] = [
(0, vue_2.createTextVNode)(" 记住父节点键 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["onClick"]))
: (0, vue_2.createCommentVNode)("v-if", true)
]),
_: 2 /* DYNAMIC */
}, [
(customTag.value)
? {
name: "tag",
fn: (0, vue_2.withCtx)(({ data, deleteTag, selectDisabled }: any) => [
(0, vue_2.createElementVNode)("div", _hoisted_4, [
(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: selectDisabled || !data.length,
onClick: ($event?: any) => (deleteTag($event, 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", "check-strictly"]),
(0, vue_2.createElementVNode)("pre", _hoisted_5, (0, vue_2.toDisplayString)(JSON.stringify({
value: value.value,
removed: removed.value,
strict: strict.value,
disabled: disabled.value,
customTag: customTag.value,
halfCheckedKeys: halfCheckedKeys.value,
checkedKeys: checkedKeys.value
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-049f279c";
},
"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-049f279c] {
display: grid;
gap: var(--asam-space-md);
}
.demo-layout-2[data-v-049f279c] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
p[data-v-049f279c]: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-tag" };
const _hoisted_5 = { "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: 'AsamRemoteTreeSelectNativeTreePresentationDemo' }, {
__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 checkedKeys = (0, vue_2.ref)([]);
function inspect() {
checkedKeys.value = control.value?.getCheckedKeys(false) ?? [];
halfCheckedKeys.value = control.value?.getHalfCheckedKeys() ?? [];
}
const parentKey = (0, vue_2.ref)();
const parentData = (0, vue_2.shallowRef)();
const halfCheckedKeys = (0, vue_2.ref)([]);
function rememberKey(key) {
if (typeof key !== 'string' && typeof key !== 'number')
throw new Error('Expected public native node key');
parentKey.value = key;
}
function rememberNode(data) {
rememberKey(data.value);
parentData.value = data;
}
function clearChecked() {
control.value?.setCheckedKeys([], false);
inspect();
}
function checkParent(deep) {
if (parentKey.value === undefined)
throw new Error('Tree source has not settled');
control.value?.setChecked(parentKey.value, true, deep);
inspect();
}
function checkDefault() {
if (parentKey.value === undefined)
throw new Error('Tree source has not settled');
control.value?.setChecked(parentKey.value, true);
inspect();
}
function checkData() {
if (!parentData.value)
throw new Error('Tree node data missing');
control.value?.setChecked(parentData.value, true, true);
inspect();
}
function uncheckData() {
if (!parentData.value)
throw new Error('Tree node data missing');
control.value?.setChecked(parentData.value, false, true);
inspect();
}
function checkAbsent() {
control.value?.setChecked(999, true, true);
inspect();
}
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[8] || (_cache[8] = [
(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[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: _cache[2] || (_cache[2] = $event => (strict.value = !strict.value))
}, {
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: clearChecked
}, {
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[3] || (_cache[3] = $event => (checkParent(false)))
}, {
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[4] || (_cache[4] = $event => (checkParent(true)))
}, {
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: checkDefault
}, {
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: checkData
}, {
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: checkAbsent
}, {
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: uncheckData
}, {
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[5] || (_cache[5] = $event => (value.value = ['alpha', 'beta']))
}, {
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: inspect
}, {
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.AsamRemoteTreeSelect), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[6] || (_cache[6] = $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: "高级树展示",
"show-checkbox": "",
"check-strictly": strict.value,
"check-on-click-node": false,
"render-after-expand": false,
"popper-style": { minWidth: '360px' },
onRemoveTag: _cache[7] || (_cache[7] = $event => (removed.value.push($event)))
}, (0, vue_1.createSlots)({
prefix: (0, vue_1.withCtx)(() => [
_cache[20] || (_cache[20] = (0, vue_1.createElementVNode)("span", { "data-testid": "tree-presentation-prefix" }, "树前缀", -1 /* CACHED */))
]),
header: (0, vue_1.withCtx)(() => [
_cache[21] || (_cache[21] = (0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "tree-presentation-header"
}, "完整层级来源", -1 /* CACHED */))
]),
footer: (0, vue_1.withCtx)(() => [
_cache[22] || (_cache[22] = (0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "tree-presentation-footer"
}, "禁用项保持禁用", -1 /* CACHED */))
]),
empty: (0, vue_1.withCtx)(() => [
_cache[23] || (_cache[23] = (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),
(option?.value === 'team')
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamButton), {
key: 0,
type: "default",
"native-type": "button",
onClick: (0, vue_1.withModifiers)($event => (rememberNode(data)), ["stop"])
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[24] || (_cache[24] = [
(0, vue_1.createTextVNode)(" 记住父节点键 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["onClick"]))
: (0, vue_1.createCommentVNode)("v-if", true)
]),
_: 2 /* DYNAMIC */
}, [
(customTag.value)
? {
name: "tag",
fn: (0, vue_1.withCtx)(({ data, deleteTag, selectDisabled }) => [
(0, vue_1.createElementVNode)("div", _hoisted_4, [
(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: selectDisabled || !data.length,
onClick: $event => (deleteTag($event, 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", "check-strictly"]),
(0, vue_1.createElementVNode)("pre", _hoisted_5, (0, vue_1.toDisplayString)(JSON.stringify({
value: value.value,
removed: removed.value,
strict: strict.value,
disabled: disabled.value,
customTag: customTag.value,
halfCheckedKeys: halfCheckedKeys.value,
checkedKeys: checkedKeys.value
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-b71a580a";
},
"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-b71a580a] {
display: grid;
gap: var(--asam-space-md);
}
.demo-layout-2[data-v-b71a580a] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
p[data-v-b71a580a]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>示例还保留默认深度（省略第三参数）的独立勾选、按 default 插槽节点 data 的递归勾选，以及不存在数字键的无副作用操作。传入的节点 data 保留原生 value 键，不能用业务 raw 对象代替。
递归勾选后，调用 setChecked(data, false, true) 取消可用后代的勾选，并清空父节点的半选状态。此操作直接验证 setChecked 的 checked=false 分支，与单独调用 setCheckedKeys 清空列表的演示各自对应。
局部请求错误插槽
可选 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: 'AsamRemoteTreeSelectDemoLocalErrorExample' },
__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: 'AsamRemoteTreeSelect-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: 'AsamRemoteTreeSelectChildLocalErrorExample' },
__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.AsamRemoteTreeSelect), {
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-1d7751ea";
},
"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-1d7751ea] {
display: grid;
gap: var(--asam-space-md);
}
p[data-v-1d7751ea]: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: 'AsamRemoteTreeSelectDemoLocalErrorExample' }, {
__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: 'AsamRemoteTreeSelect-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: 'AsamRemoteTreeSelectChildLocalErrorExample' }, {
__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.AsamRemoteTreeSelect), {
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-dbdd85e7";
},
"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-dbdd85e7] {
display: grid;
gap: var(--asam-space-md);
}
p[data-v-dbdd85e7]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>局部与全局浮层
基础示例使用默认的全局挂载；局部挂载示例展示显式配置的 teleported 或 appendTo。先打开控件浮层，再观察其所在容器。挂载位置与控件值、请求协议互相独立。
API
属性 AsamRemoteTreeSelectProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
ariaLabel | — | string | undefined | — |
id | — | string | undefined | — |
effect | — | enum"light" | "dark"完整类型：(AsamRemoteTreeSelectProps<V, I, P, R>)["effect"] | — |
popperClass | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["popperClass"] | — |
popperStyle | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["popperStyle"] | — |
fallbackPlacements | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["fallbackPlacements"] | — |
offset | — | number | undefined | — |
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"完整类型：(AsamRemoteTreeSelectProps<V, I, P, R>)["placement"] | — |
popperOptions | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["popperOptions"] | — |
showArrow | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["showArrow"] | — |
appendTo | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["appendTo"] | — |
persistent | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["persistent"] | — |
teleported | — | boolean | undefined | false |
disabled | — | boolean | undefined | false |
tabindex | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["tabindex"] | — |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
emptyText | — | string | undefined | — |
defaultExpandAll | — | boolean | undefined | — |
indent | — | number | undefined | — |
props | — | AsamTreeOptionProps | undefined | — |
name | — | string | undefined | — |
icon | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["icon"] | — |
separator | — | string | undefined | — |
modelValue | — | 查看完整类型string | undefined | V | null | undefined | AsamHierarchyOption<V, I> | null | undefined | readonly V[] | undefined | readonly AsamHierarchyOption<V, I>[] | undefined | false |
accordion | — | boolean | undefined | — |
loading | — | boolean | undefined | — |
filterMethod | — | ((query: string) => void) | undefined | — |
renderAfterExpand | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["renderAfterExpand"] | — |
nodeKey | — | string | undefined | — |
checkStrictly | — | boolean | undefined | — |
expandOnClickNode | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["expandOnClickNode"] | — |
checkOnClickNode | — | boolean | undefined | — |
checkOnClickLeaf | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["checkOnClickLeaf"] | — |
checkDescendants | — | boolean | undefined | — |
autoExpandParent | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["autoExpandParent"] | — |
defaultCheckedKeys | — | AsamTreeKey[] | undefined | — |
defaultExpandedKeys | — | AsamTreeKey[] | undefined | — |
currentNodeKey | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["currentNodeKey"] | — |
renderContent | — | AsamTreeRenderContentFunction | undefined | — |
showCheckbox | — | boolean | undefined | — |
draggable | — | boolean | undefined | — |
allowDrag | — | AsamTreeAllowDragFunction | undefined | — |
allowDrop | — | AsamTreeAllowDropFunction | undefined | — |
highlightCurrent | — | boolean | undefined | — |
filterNodeMethod | — | AsamTreeFilterNodeMethodFunction | undefined | — |
multiple | — | true | false | undefined | false |
valueMode | — | enum"value" | "object"完整类型："value" | undefined | "object" | — |
multipleValueMode | — | enum"string" | "array"完整类型："string" | undefined | "array" | undefined | — |
emptyValues | — | unknown[] | undefined | — |
valueOnClear | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["valueOnClear"] | — |
validateEvent | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["validateEvent"] | — |
clearable | — | boolean | undefined | false |
automaticDropdown | — | boolean | undefined | — |
clearIcon | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["clearIcon"] | — |
placeholder | — | string | undefined | — |
autocomplete | — | string | undefined | — |
filterable | — | boolean | undefined | false |
allowCreate | — | boolean | undefined | — |
remote | — | boolean | undefined | — |
debounce | — | number | undefined | — |
loadingText | — | string | undefined | — |
noMatchText | — | string | undefined | — |
noDataText | — | string | undefined | — |
remoteMethod | — | ((query: string) => void) | undefined | — |
multipleLimit | — | number | undefined | — |
defaultFirstOption | — | boolean | undefined | — |
reserveKeyword | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["reserveKeyword"] | — |
valueKey | — | string | undefined | — |
collapseTags | — | boolean | undefined | — |
collapseTagsTooltip | — | boolean | undefined | — |
tagTooltip | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["tagTooltip"] | — |
maxCollapseTags | — | number | undefined | — |
fitInputWidth | — | boolean | undefined | — |
suffixIcon | — | (AsamRemoteTreeSelectProps<V, I, P, R>)["suffixIcon"] | — |
tagType | — | enum"primary" | "success" | "danger" | "warning" | "info"完整类型：(AsamRemoteTreeSelectProps<V, I, P, R>)["tagType"] | — |
tagEffect | — | enum"light" | "dark" | "plain"完整类型：(AsamRemoteTreeSelectProps<V, I, P, R>)["tagEffect"] | — |
remoteShowSuffix | — | boolean | undefined | — |
cacheData | — | readonly AsamHierarchyOption<V, I>[] | 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 | — |
事件 AsamTreeSelectDataEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
clear | — | (AsamTreeSelectDataEmits<V, I>)["clear"] | — |
focus | — | [event: FocusEvent] | — |
current-change | — | (AsamTreeSelectDataEmits<V, I>)["current-change"] | — |
success | — | [data: readonly AsamOption<V, I>[]] | — |
end-reached | — | [direction: AsamScrollbarDirection] | — |
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] | — |
check-change | — | [data: any, checked: boolean, indeterminate: boolean] | — |
node-click | — | (AsamTreeSelectDataEmits<V, I>)["node-click"] | — |
node-contextmenu | — | (AsamTreeSelectDataEmits<V, I>)["node-contextmenu"] | — |
node-collapse | — | (AsamTreeSelectDataEmits<V, I>)["node-collapse"] | — |
node-expand | — | (AsamTreeSelectDataEmits<V, I>)["node-expand"] | — |
check | — | [data: any, checkedInfo: AsamTreeCheckedInfo] | — |
node-drag-start | — | (AsamTreeSelectDataEmits<V, I>)["node-drag-start"] | — |
node-drag-end | — | (AsamTreeSelectDataEmits<V, I>)["node-drag-end"] | — |
node-drop | — | (AsamTreeSelectDataEmits<V, I>)["node-drop"] | — |
node-drag-leave | — | (AsamTreeSelectDataEmits<V, I>)["node-drag-leave"] | — |
node-drag-enter | — | (AsamTreeSelectDataEmits<V, I>)["node-drag-enter"] | — |
node-drag-over | — | (AsamTreeSelectDataEmits<V, I>)["node-drag-over"] | — |
blur | — | [event: FocusEvent] | — |
visible-change | — | [visible: boolean] | — |
remove-tag | — | [value: unknown] | — |
popup-scroll | — | [event: { scrollTop: number; scrollLeft: number; }] | — |
插槽 AsamTreeSelectDataSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
label | — | (AsamTreeSelectDataSlots<V, I>)["label"] | — |
tag | — | 查看完整类型((scope: { data: AsamTreeSelectTagOption[]; selectDisabled: boolean; deleteTag: (event: MouseEvent, option: AsamTreeSelectTagOption) => void; }) => unknown) | undefined | — |
prefix | — | (() => unknown) | undefined | — |
loading | — | (() => unknown) | undefined | — |
footer | — | (() => unknown) | undefined | — |
header | — | (() => unknown) | undefined | — |
empty | — | (() => unknown) | undefined | — |
error | 替换本地错误区域；重试返回现有强制重新加载的 Promise。 | (AsamTreeSelectDataSlots<V, I>)["error"] | — |
default | — | 查看完整类型((scope: Omit<Pick<AsamTreeRenderContentContext, "data" | "store" | "node"> & { option?: AsamHierarchyOption; }, "option"> & { option: AsamOption<V, I> | undefined; }) => unknown) | undefined | — |
实例方法与状态 AsamRemoteTreeSelectExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
filter | — | (value: AsamTreeFilterValue) => void | — |
updateKeyChildren | — | (key: AsamTreeKey, data: AsamTreeData) => void | — |
getCheckedNodes | — | (leafOnly?: boolean, includeHalfChecked?: boolean) => AsamTreeNodeData[] | — |
getCheckedKeys | — | (leafOnly?: boolean) => AsamTreeKey[] | — |
getCurrentNode | — | () => AsamTreeNodeData | null | — |
getCurrentKey | — | () => AsamTreeKey | null | — |
setCheckedNodes | — | (AsamRemoteTreeSelectExpose<V, I>)["setCheckedNodes"] | — |
setCheckedKeys | — | (keys: AsamTreeKey[], leafOnly?: boolean) => void | — |
setChecked | — | (data: AsamTreeKey | AsamTreeNodeData, checked: boolean, deep?: boolean) => void | — |
getHalfCheckedNodes | — | () => AsamTreeNodeData[] | — |
getHalfCheckedKeys | — | () => AsamTreeKey[] | — |
setCurrentNode | — | (AsamRemoteTreeSelectExpose<V, I>)["setCurrentNode"] | — |
setCurrentKey | — | (key?: AsamTreeKey | null, shouldAutoExpandParent?: boolean) => void | — |
getNode | — | (AsamRemoteTreeSelectExpose<V, I>)["getNode"] | — |
remove | — | (AsamRemoteTreeSelectExpose<V, I>)["remove"] | — |
append | — | (AsamRemoteTreeSelectExpose<V, I>)["append"] | — |
insertBefore | — | (AsamRemoteTreeSelectExpose<V, I>)["insertBefore"] | — |
insertAfter | — | (AsamRemoteTreeSelectExpose<V, I>)["insertAfter"] | — |
focus | — | () => void | — |
blur | — | () => void | — |
selectedLabel | — | string | string[] | — |
treeRef | — | (AsamRemoteTreeSelectExpose<V, I>)["treeRef"] | — |
selectRef | — | (AsamRemoteTreeSelectExpose<V, I>)["selectRef"] | — |
reload | — | (options?: { readonly force?: boolean; }) => Promise<AsamReloadResult<readonly AsamOption<V, I>[]>> | — |
cancel | — | () => void | — |
用法与契约补充说明
数据来源与覆盖
dataSource、api + params、request 三种来源只选一种。dataSource 必须由 defineAsamOptions 创建，使用该来源时映射、转换和缓存配置写在工厂内，不再重复传短来源属性。自定义字段映射同时提供同步 transform；API 返回 Promise，并检查 context.signal。
生命周期、事件与实例
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 回调删除，remove-tag 原样转发基础组件的原生事件载荷；模型仍保留原始标量值。禁用后不能删除或勾选。checkStrictly 控制父节点是否独立选择，读取公开勾选实例只序列化键，避免节点循环引用。原生实例和原生节点事件使用节点键，取 default 插槽的 data.value 或 getCheckedKeys 返回值；业务值取 v-model 或 option.value，不能直接把业务模型值当作原生实例键。showCheckbox、checkOnClickNode 和 renderAfterExpand 保持 TreeSelect 公开语义，宽度通过 popperStyle.minWidth 设置。勾选接口来自 Tree，标签和弹层来自 Select；不从本例推导节点懒加载支持。
层级展示与勾选策略
点击 default 插槽内的“记住父节点键”保存原生 data.value，再使用 setChecked(key, true, deep) 的第三个参数。checkStrictly=true 时，deep=false 仅勾选父节点；deep=true 勾选两个可用子节点，禁用子节点保持未选，因此父节点在 getHalfCheckedKeys 中半选。模型业务值从 option.value 或 v-model 取得；AsamOption 没有公开 key 字段。原生实例读写使用插槽提供的节点键，示例先检查其为 string/number。
局部请求错误插槽
可选 error 插槽仅在当前请求错误存在时调用，接收只读 { error, stale, retry }。
error 与本实例 error 事件中的 AsamDataError 为同一对象，保留 cause、kind、
message 与 notified；渲染插槽不会再次通知 provider。stale 表示保留的数据已过期。
更多参数与事件说明
数据入口的原生事件边界
TreeSelect 使用原生 visible-change、remove-tag、popup-scroll 和 end-reached 名称；末端事件保留原生滚动方向类型（top/bottom/left/right），不能把 popup-scroll 改名。Tree 节点事件保留其参数；remove-tag 和节点原生载荷可包含基础层的类型键（例如数字值 1 对应 number:1），不能把它等同于规范化的 modelValue/change 值。数据包装增加 success/error，模型事件沿用本文的值/对象模式。
局部请求错误插槽
retry() 不接收参数，直接返回现有 reload({ force: true }) 的 Promise，结果为
AsamReloadResult<readonly AsamOption<V, I>[]> 的 success、error 或 cancelled 分支。
重试遵守 active、当前来源、取消和卸载规则，不改写模型。
继承能力
本入口的独有 API 见上表，基础能力见本站对应页面。
关联组件
参数与事件补充说明
组合契约按分支生效；请同时查看公开类型。
参数与事件说明
ariaLabel
必填：否；声明来源：上游声明。
id
必填：否；声明来源：上游声明。
effect
必填：否；声明来源：上游声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark"
popperClass
必填：否；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
popperStyle
必填：否；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
fallbackPlacements
必填：否；声明来源：上游声明。
offset
必填：否；声明来源：上游声明。
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"
popperOptions
必填：否；声明来源：上游声明。
popperOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["popperOptions"]>, "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"popperOptions.modifiers:PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["popperOptions"]>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
showArrow
必填：否；声明来源：上游声明。
showArrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
appendTo
必填：否；声明来源：上游声明。
appendTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
persistent
必填：否；声明来源：上游声明。
persistent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
teleported
必填：否；声明来源：ASAM 声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）tabindex
必填：否；声明来源：上游声明。
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
emptyText
必填：否；声明来源：上游声明。
defaultExpandAll
必填：否；声明来源：上游声明。
defaultExpandAll 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
indent
必填：否；声明来源：上游声明。
props
必填：否；声明来源：上游声明。
props 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
props.children:string | undefined— 上游声明指定子树为节点对象的某个属性值
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）props.label:PublicMember<NonNullable<AsamTreeOptionProps | undefined>, "label">— 上游声明指定节点标签为节点对象的某个属性值
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）事件参数：
(data: AsamTreeNodeData, node: Parameters<Extract<NonNullable<PublicMember<NonNullable<AsamTreeOptionProps | undefined>, "label">>, (...args: never[]) => unknown>>[1]): stringprops.disabled:PublicMember<NonNullable<AsamTreeOptionProps | undefined>, "disabled">— 上游声明指定节点选择框是否禁用为节点对象的某个属性值
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）事件参数：
(data: AsamTreeNodeData, node: Parameters<Extract<NonNullable<PublicMember<NonNullable<AsamTreeOptionProps | undefined>, "disabled">>, (...args: never[]) => unknown>>[1]): booleanprops.isLeaf:PublicMember<NonNullable<AsamTreeOptionProps | undefined>, "isLeaf">— 上游声明指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）事件参数：
(data: AsamTreeNodeData, node: Parameters<Extract<NonNullable<PublicMember<NonNullable<AsamTreeOptionProps | undefined>, "isLeaf">>, (...args: never[]) => unknown>>[1]): booleanprops.class:PublicMember<NonNullable<AsamTreeOptionProps | undefined>, "class">— 上游声明自定义节点类名
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）事件参数：
(data: AsamTreeNodeData, node: Parameters<Extract<NonNullable<PublicMember<NonNullable<AsamTreeOptionProps | undefined>, "class">>, (...args: never[]) => unknown>>[1]): string | { [key: string]: boolean; }
name
必填：否；声明来源：上游声明。
icon
必填：否；声明来源：上游声明。
icon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["icon"]>, (...args: never[]) => unknown>>[1]): any
icon.__isFragment:undefined— 依赖声明icon.__isTeleport:undefined— 依赖声明icon.__isSuspense:undefined— 依赖声明
separator
必填：否；声明来源：ASAM 声明。
modelValue
必填：否；声明来源：ASAM 声明。
默认值与来源
false（隐式 Boolean 默认；已安装组件）accordion
必填：否；声明来源：上游声明。
accordion 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
loading
必填：否；声明来源：上游声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
filterMethod
必填：否；声明来源：上游声明。
filterMethod 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(query: string): void
renderAfterExpand
必填：否；声明来源：上游声明。
renderAfterExpand 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
nodeKey
必填：否；声明来源：上游声明。
checkStrictly
必填：否；声明来源：上游声明。
checkStrictly 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
expandOnClickNode
必填：否；声明来源：上游声明。
expandOnClickNode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
checkOnClickNode
必填：否；声明来源：上游声明。
checkOnClickNode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
checkOnClickLeaf
必填：否；声明来源：上游声明。
checkOnClickLeaf 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
checkDescendants
必填：否；声明来源：上游声明。
checkDescendants 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
autoExpandParent
必填：否；声明来源：上游声明。
autoExpandParent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
defaultCheckedKeys
必填：否；声明来源：上游声明。
defaultExpandedKeys
必填：否；声明来源：上游声明。
currentNodeKey
必填：否；声明来源：上游声明。
renderContent
必填：否；声明来源：上游声明。
renderContent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(h: Parameters<Extract<NonNullable<AsamTreeRenderContentFunction | undefined>, (...args: never[]) => unknown>>[0], context: AsamTreeRenderContentContext): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[]
showCheckbox
必填：否；声明来源：上游声明。
showCheckbox 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
draggable
必填：否；声明来源：上游声明。
draggable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
allowDrag
必填：否；声明来源：上游声明。
allowDrag 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(node: Parameters<Extract<NonNullable<AsamTreeAllowDragFunction | undefined>, (...args: never[]) => unknown>>[0]): boolean
allowDrop
必填：否；声明来源：上游声明。
allowDrop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(draggingNode: Parameters<Extract<NonNullable<AsamTreeAllowDropFunction | undefined>, (...args: never[]) => unknown>>[0], dropNode: Parameters<Extract<NonNullable<AsamTreeAllowDropFunction | undefined>, (...args: never[]) => unknown>>[1], type: AsamTreeAllowDropType): boolean
highlightCurrent
必填：否；声明来源：上游声明。
highlightCurrent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
filterNodeMethod
必填：否；声明来源：上游声明。
filterNodeMethod 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: any, data: AsamTreeNodeData, child: Parameters<Extract<NonNullable<AsamTreeFilterNodeMethodFunction | undefined>, (...args: never[]) => unknown>>[2]): boolean
multiple
必填：否；声明来源：ASAM 声明。
multiple 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：true
枚举：false
默认值与来源
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
clearable
必填：否；声明来源：ASAM 声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）automaticDropdown
必填：否；声明来源：上游声明。
automaticDropdown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
clearIcon
必填：否；声明来源：上游声明。
clearIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["clearIcon"]>, (...args: never[]) => unknown>>[1]): any
clearIcon.__isFragment:undefined— 依赖声明clearIcon.__isTeleport:undefined— 依赖声明clearIcon.__isSuspense:undefined— 依赖声明
placeholder
必填：否；声明来源：ASAM 声明。
autocomplete
必填：否；声明来源：上游声明。
filterable
必填：否；声明来源：ASAM 声明。
filterable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）allowCreate
必填：否；声明来源：上游声明。
allowCreate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
remote
必填：否；声明来源：上游声明。
remote 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
debounce
必填：否；声明来源：上游声明。
loadingText
必填：否；声明来源：上游声明。
noMatchText
必填：否；声明来源：上游声明。
noDataText
必填：否；声明来源：上游声明。
remoteMethod
必填：否；声明来源：上游声明。
remoteMethod 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(query: string): void
multipleLimit
必填：否；声明来源：上游声明。
defaultFirstOption
必填：否；声明来源：上游声明。
defaultFirstOption 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
reserveKeyword
必填：否；声明来源：上游声明。
reserveKeyword 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
valueKey
必填：否；声明来源：上游声明。
collapseTags
必填：否；声明来源：上游声明。
collapseTags 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
collapseTagsTooltip
必填：否；声明来源：上游声明。
collapseTagsTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
tagTooltip
必填：否；声明来源：上游声明。
tagTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
tagTooltip.appendTo:string | HTMLElement | undefined— 上游声明指示 Tooltip 的内容将附加在哪一个网页元素上
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）嵌套展开边界：大型实例类型；完整类型见公开类型视图。
tagTooltip.placement:PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["tagTooltip"]>, "placement">— 上游声明Tooltip 组件出现的位置
固定上游文档默认：
bottom（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
"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"tagTooltip.fallbackPlacements:PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["tagTooltip"]>, "fallbackPlacements">— 上游声明提示浮层可采用的位置列表，参阅 Popper 的 fallbackPlacements。
固定上游文档默认：
['bottom', 'top', 'right', 'left']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.effect:PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["tagTooltip"]>, "effect">— 上游声明Tooltip 主题，内置了 dark / light 两种
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
"light"/"dark"tagTooltip.popperClass:PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["tagTooltip"]>, "popperClass">— 上游声明为 Tooltip 的 popper 添加自定义类名
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
falsetagTooltip.popperStyle:PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["tagTooltip"]>, "popperStyle">— 上游声明为 Tooltip 的 popper 添加自定义样式
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
tagTooltip.transition:string | undefined— 上游声明动画名称
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.teleported:boolean | undefined— 上游声明是否使用 teleport。设置成 true则会被追加到 append-to 的位置
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truetagTooltip.popperOptions:PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["tagTooltip"]>, "popperOptions">— 上游声明Popper 配置参数。
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.popperOptions.placement:PublicMember<NonNullable<PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["tagTooltip"]>, "popperOptions">>, "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"tagTooltip.popperOptions.modifiers:PublicMember<NonNullable<PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["tagTooltip"]>, "popperOptions">>, "modifiers">— 依赖声明tagTooltip.popperOptions.strategy:PublicMember<NonNullable<PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["tagTooltip"]>, "popperOptions">>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"tagTooltip.popperOptions.onFirstUpdate:PublicMember<NonNullable<PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["tagTooltip"]>, "popperOptions">>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["tagTooltip"]>, "popperOptions">>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
tagTooltip.showAfter:number | undefined— 上游声明在触发后多久显示内容，单位毫秒
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.hideAfter:number | undefined— 上游声明关闭时的延迟
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.autoClose:number | undefined— 上游声明tooltip 出现后自动隐藏延时，单位毫秒
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.offset:number | undefined— 上游声明Tooltip 出现位置的偏移量
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
maxCollapseTags
必填：否；声明来源：上游声明。
fitInputWidth
必填：否；声明来源：上游声明。
fitInputWidth 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
suffixIcon
必填：否；声明来源：上游声明。
suffixIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamRemoteTreeSelectProps<V, I, P, R>)["suffixIcon"]>, (...args: never[]) => unknown>>[1]): any
suffixIcon.__isFragment:undefined— 依赖声明suffixIcon.__isTeleport:undefined— 依赖声明suffixIcon.__isSuspense:undefined— 依赖声明
tagType
必填：否；声明来源：上游声明。
tagType 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："primary" / "success" / "danger" / "warning" / "info"
tagEffect
必填：否；声明来源：上游声明。
tagEffect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark" / "plain"
remoteShowSuffix
必填：否；声明来源：上游声明。
remoteShowSuffix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
cacheData
必填：否；声明来源：ASAM 声明。
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
AsamRemoteTreeSelectProps 公开类型视图
ts
import type { Attrs, VNode, Component } from 'vue';
import type { AsamRemoteTreeSelectProps, AsamValue, AsamRecord, AsamHierarchyRuntimeProps, AsamControlSize, AsamTreeOptionProps, AsamTreeNodeData, AsamTreeKey, AsamTreeRenderContentFunction, AsamTreeRenderContentContext, AsamTreeAllowDragFunction, AsamTreeAllowDropFunction, AsamTreeAllowDropType, AsamTreeFilterNodeMethodFunction, AsamHierarchyOption, AsamOptionsSource, AsamApiRequest, AsamRequestContext, AsamMapping, AsamOptionsCache, AsamRequestConfig } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamRemoteTreeSelectProps
type PublicContract<V extends AsamValue = AsamValue, I extends object = AsamRecord, P = unknown, R = unknown> = AsamRemoteTreeSelectProps<V, I, P, R>;TreeSelect 使用基础 Select 的连字符命名，并保留 end-reached 的实际方向。
参数与事件说明
clear
必填：是；声明来源：ASAM 声明。
focus
必填：是；声明来源：ASAM 声明。
current-change
必填：是；声明来源：ASAM 声明。
success
必填：是；声明来源：数据 / provider 协议。
end-reached
必填：是；声明来源：数据 / provider 协议。
change
必填：是；声明来源：数据 / provider 协议。
error
必填：是；声明来源：数据 / provider 协议。
update:modelValue
必填：是；声明来源：数据 / provider 协议。
check-change
必填：是；声明来源：ASAM 声明。
node-click
必填：是；声明来源：ASAM 声明。
node-contextmenu
必填：是；声明来源：ASAM 声明。
node-collapse
必填：是；声明来源：ASAM 声明。
node-expand
必填：是；声明来源：ASAM 声明。
check
必填：是；声明来源：ASAM 声明。
node-drag-start
必填：是；声明来源：ASAM 声明。
node-drag-end
必填：是；声明来源：ASAM 声明。
node-drop
必填：是；声明来源：ASAM 声明。
node-drag-leave
必填：是；声明来源：ASAM 声明。
node-drag-enter
必填：是；声明来源：ASAM 声明。
node-drag-over
必填：是；声明来源：ASAM 声明。
blur
必填：是；声明来源：ASAM 声明。
visible-change
必填：是；声明来源：ASAM 声明。
remove-tag
必填：是；声明来源：ASAM 声明。
popup-scroll
必填：是；声明来源：ASAM 声明。
AsamTreeSelectDataEmits 公开类型视图
ts
import type { AsamTreeSelectDataEmits, AsamValue, AsamHierarchyEmits, AsamOption, AsamScrollbarDirection, AsamDataError, AsamTreeCheckedInfo, AsamTreeNodeDropType } from '@asam-ui/ui';
// AsamTreeSelectDataEmits
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
"clear": (AsamTreeSelectDataEmits<V, I>)["clear"];
"focus": [event: FocusEvent];
"current-change": (AsamTreeSelectDataEmits<V, I>)["current-change"];
"success": [data: readonly AsamOption<V, I>[]];
"end-reached": [direction: AsamScrollbarDirection];
"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];
"check-change": [data: any, checked: boolean, indeterminate: boolean];
"node-click": (AsamTreeSelectDataEmits<V, I>)["node-click"];
"node-contextmenu": (AsamTreeSelectDataEmits<V, I>)["node-contextmenu"];
"node-collapse": (AsamTreeSelectDataEmits<V, I>)["node-collapse"];
"node-expand": (AsamTreeSelectDataEmits<V, I>)["node-expand"];
"check": [data: any, checkedInfo: AsamTreeCheckedInfo];
"node-drag-start": (AsamTreeSelectDataEmits<V, I>)["node-drag-start"];
"node-drag-end": (AsamTreeSelectDataEmits<V, I>)["node-drag-end"];
"node-drop": (AsamTreeSelectDataEmits<V, I>)["node-drop"];
"node-drag-leave": (AsamTreeSelectDataEmits<V, I>)["node-drag-leave"];
"node-drag-enter": (AsamTreeSelectDataEmits<V, I>)["node-drag-enter"];
"node-drag-over": (AsamTreeSelectDataEmits<V, I>)["node-drag-over"];
"blur": [event: FocusEvent];
"visible-change": [visible: boolean];
"remove-tag": [value: unknown];
"popup-scroll": [event: { scrollTop: number; scrollLeft: number; }];
};参数与事件说明
label
必填：否；声明来源：ASAM 声明。
label 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: Pick<any, "value" | "label"> & { index: number; }): unknown
tag
必填：否；声明来源：ASAM 声明。
tag 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { data: AsamTreeSelectTagOption[]; selectDisabled: boolean; deleteTag: (event: MouseEvent, option: AsamTreeSelectTagOption) => void; }): unknown
prefix
必填：否；声明来源：ASAM 声明。
prefix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
loading
必填：否；声明来源：ASAM 声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
footer
必填：否；声明来源：ASAM 声明。
footer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
header
必填：否；声明来源：ASAM 声明。
header 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
empty
必填：否；声明来源：ASAM 声明。
empty 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
error
必填：否；声明来源：数据 / provider 协议。
error 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: Parameters<Extract<NonNullable<(AsamTreeSelectDataSlots<V, I>)["error"]>, (...args: never[]) => unknown>>[0]): unknown
default
必填：否；声明来源：数据 / provider 协议。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: Omit<Pick<AsamTreeRenderContentContext, "data" | "store" | "node"> & { option?: AsamHierarchyOption; }, "option"> & { option: AsamOption<V, I> | undefined; }): unknown
AsamTreeSelectDataSlots 公开类型视图
ts
import type { AsamTreeSelectDataSlots, AsamValue, AsamTreeSelectTagOption, AsamHierarchySlots, AsamDataError, AsamOption, AsamReloadResult, AsamTreeRenderContentContext, AsamHierarchyOption } from '@asam-ui/ui';
// AsamTreeSelectDataSlots
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
"label"?: (AsamTreeSelectDataSlots<V, I>)["label"];
"tag"?: ((scope: { data: AsamTreeSelectTagOption[]; selectDisabled: boolean; deleteTag: (event: MouseEvent, option: AsamTreeSelectTagOption) => void; }) => unknown) | undefined;
"prefix"?: (() => unknown) | undefined;
"loading"?: (() => unknown) | undefined;
"footer"?: (() => unknown) | undefined;
"header"?: (() => unknown) | undefined;
"empty"?: (() => unknown) | undefined;
"error"?: (AsamTreeSelectDataSlots<V, I>)["error"];
"default"?: ((scope: Omit<Pick<AsamTreeRenderContentContext, "data" | "store" | "node"> & { option?: AsamHierarchyOption; }, "option"> & { option: AsamOption<V, I> | undefined; }) => unknown) | undefined;
};参数与事件说明
filter
必填：是；声明来源：上游声明。
filter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: any): void
updateKeyChildren
必填：是；声明来源：上游声明。
updateKeyChildren 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(key: AsamTreeKey, data: AsamTreeData): void
getCheckedNodes
必填：是；声明来源：上游声明。
getCheckedNodes 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(leafOnly?: boolean | undefined, includeHalfChecked?: boolean | undefined): AsamTreeNodeData[]
getCheckedKeys
必填：是；声明来源：上游声明。
getCheckedKeys 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(leafOnly?: boolean | undefined): AsamTreeKey[]
getCurrentNode
必填：是；声明来源：上游声明。
getCurrentNode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): AsamTreeNodeData | null
getCurrentKey
必填：是；声明来源：上游声明。
getCurrentKey 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): AsamTreeKey | null
setCheckedNodes
必填：是；声明来源：上游声明。
setCheckedNodes 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(nodes: Parameters<Extract<NonNullable<(AsamRemoteTreeSelectExpose<V, I>)["setCheckedNodes"]>, (...args: never[]) => unknown>>[0], leafOnly?: boolean | undefined): void
setCheckedKeys
必填：是；声明来源：上游声明。
setCheckedKeys 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(keys: AsamTreeKey[], leafOnly?: boolean | undefined): void
setChecked
必填：是；声明来源：上游声明。
setChecked 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(data: AsamTreeNodeData | AsamTreeKey, checked: boolean, deep?: boolean | undefined): void
getHalfCheckedNodes
必填：是；声明来源：上游声明。
getHalfCheckedNodes 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): AsamTreeNodeData[]
getHalfCheckedKeys
必填：是；声明来源：上游声明。
getHalfCheckedKeys 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): AsamTreeKey[]
setCurrentNode
必填：是；声明来源：上游声明。
setCurrentNode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(node: Parameters<Extract<NonNullable<(AsamRemoteTreeSelectExpose<V, I>)["setCurrentNode"]>, (...args: never[]) => unknown>>[0], shouldAutoExpandParent?: boolean | undefined): void
setCurrentKey
必填：是；声明来源：上游声明。
setCurrentKey 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(key?: AsamTreeKey | null | undefined, shouldAutoExpandParent?: boolean | undefined): void
getNode
必填：是；声明来源：上游声明。
getNode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(data: AsamTreeNodeData | AsamTreeKey): ReturnType<Extract<NonNullable<(AsamRemoteTreeSelectExpose<V, I>)["getNode"]>, (...args: never[]) => unknown>>
remove
必填：是；声明来源：上游声明。
remove 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(data: Parameters<Extract<NonNullable<(AsamRemoteTreeSelectExpose<V, I>)["remove"]>, (...args: never[]) => unknown>>[0]): void
append
必填：是；声明来源：上游声明。
append 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(data: AsamTreeNodeData, parentNode: Parameters<Extract<NonNullable<(AsamRemoteTreeSelectExpose<V, I>)["append"]>, (...args: never[]) => unknown>>[1]): void
insertBefore
必填：是；声明来源：上游声明。
insertBefore 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(data: AsamTreeNodeData, refNode: Parameters<Extract<NonNullable<(AsamRemoteTreeSelectExpose<V, I>)["insertBefore"]>, (...args: never[]) => unknown>>[1]): void
insertAfter
必填：是；声明来源：上游声明。
insertAfter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(data: AsamTreeNodeData, refNode: Parameters<Extract<NonNullable<(AsamRemoteTreeSelectExpose<V, I>)["insertAfter"]>, (...args: never[]) => unknown>>[1]): void
focus
必填：是；声明来源：上游声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
blur
必填：是；声明来源：上游声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
selectedLabel
必填：是；声明来源：上游声明。
treeRef
必填：是；声明来源：ASAM 声明。
selectRef
必填：是；声明来源：ASAM 声明。
reload
必填：是；声明来源：数据 / provider 协议。
reload 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(options?: { readonly force?: boolean; } | undefined): Promise<AsamReloadResult<readonly AsamOption<V, I>[]>>
cancel
必填：是；声明来源：数据 / provider 协议。
cancel 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamRemoteTreeSelectExpose 公开类型视图
ts
import type { AsamRemoteTreeSelectExpose, AsamValue, AsamTreeFilterValue, AsamTreeKey, AsamTreeData, AsamTreeNodeData, AsamHierarchyRuntimeProps, AsamOption, AsamReloadResult } from '@asam-ui/ui';
// AsamRemoteTreeSelectExpose
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
"filter": (value: AsamTreeFilterValue) => void;
"updateKeyChildren": (key: AsamTreeKey, data: AsamTreeData) => void;
"getCheckedNodes": (leafOnly?: boolean, includeHalfChecked?: boolean) => AsamTreeNodeData[];
"getCheckedKeys": (leafOnly?: boolean) => AsamTreeKey[];
"getCurrentNode": () => AsamTreeNodeData | null;
"getCurrentKey": () => AsamTreeKey | null;
"setCheckedNodes": (AsamRemoteTreeSelectExpose<V, I>)["setCheckedNodes"];
"setCheckedKeys": (keys: AsamTreeKey[], leafOnly?: boolean) => void;
"setChecked": (data: AsamTreeKey | AsamTreeNodeData, checked: boolean, deep?: boolean) => void;
"getHalfCheckedNodes": () => AsamTreeNodeData[];
"getHalfCheckedKeys": () => AsamTreeKey[];
"setCurrentNode": (AsamRemoteTreeSelectExpose<V, I>)["setCurrentNode"];
"setCurrentKey": (key?: AsamTreeKey | null, shouldAutoExpandParent?: boolean) => void;
"getNode": (AsamRemoteTreeSelectExpose<V, I>)["getNode"];
"remove": (AsamRemoteTreeSelectExpose<V, I>)["remove"];
"append": (AsamRemoteTreeSelectExpose<V, I>)["append"];
"insertBefore": (AsamRemoteTreeSelectExpose<V, I>)["insertBefore"];
"insertAfter": (AsamRemoteTreeSelectExpose<V, I>)["insertAfter"];
"focus": () => void;
"blur": () => void;
"selectedLabel": string | string[];
"treeRef": (AsamRemoteTreeSelectExpose<V, I>)["treeRef"];
"selectRef": (AsamRemoteTreeSelectExpose<V, I>)["selectRef"];
"reload": (options?: { readonly force?: boolean; }) => Promise<AsamReloadResult<readonly AsamOption<V, I>[]>>;
"cancel": () => void;
};