虚拟树 AsamTreeV2

使用场景

在数值高度的视窗内展示较多层级节点。

基础用法与状态

下列示例只使用本入口的实际公开能力。

基础用法与状态

vue

<template>
	<AsamTreeV2
		v-bind="{
			data,
			height: 180,
			itemSize: 32,
			showCheckbox: true,
			defaultExpandedKeys: ['root'],
			props: { value: 'id', label: 'label', children: 'children', disabled: 'disabled' }
		}"
		@node-click="selected = $event.label"
	>
		<template #default="{ data: item }">
			<span>{{ item.label }}</span>
		</template>
	</AsamTreeV2>
	<p class="example-paragraph" role="status">当前节点：{{ selected }}</p>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTreeV2BasicDemo' });
import { ref } from 'vue';
import { AsamTreeV2 } from '@asam-ui/ui';
const data = [
	{
		id: 'root',
		label: '本地记录',
		children: [
			{ id: 'draft', label: '草稿' },
			{ id: 'locked', label: '锁定记录', disabled: true }
		]
	}
];
const selected = ref('');
</script>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<AsamTreeV2
		v-bind="{
			data,
			height: 180,
			itemSize: 32,
			showCheckbox: true,
			defaultExpandedKeys: ['root'],
			props: { value: 'id', label: 'label', children: 'children', disabled: 'disabled' }
		}"
		@node-click="selected = $event.label"
	>
		<template #default="{ data: item }">
			<span>{{ item.label }}</span>
		</template>
	</AsamTreeV2>
	<p class="example-paragraph" role="status">当前节点：{{ selected }}</p>
</template>

<script setup>
defineOptions({ name: 'AsamTreeV2BasicDemo' });
import { ref } from 'vue';
import { AsamTreeV2 } from '@asam-ui/ui';
const data = [
	{
		id: 'root',
		label: '本地记录',
		children: [
			{ id: 'draft', label: '草稿' },
			{ id: 'locked', label: '锁定记录', disabled: true }
		]
	}
];
const selected = ref('');
</script>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

使用约定

height/itemSize 指定视窗与行高，data 与 props 映射实际字段，节点 key 对应 props.value。完整说明。

原生协议完整用法与 API

以下用法对应固定 2.14.7。Cascader 与 TreeSelect 的示例显式使用 value-mode="native"；其原生值、路径、字段映射和回调不能直接套到标准化模式。API 表保留原生默认值，ASAM 覆盖值与四档尺寸以下列约定为准。

不论你的数据量多大，虚拟树都能毫无压力地处理。

基础用法

基础的树形结构展示

基础用法

许可

vue

<template>
	<AsamTreeV2 style="max-width: 600px" :data="data" :props="props" :height="200" />
</template>

<script lang="ts" setup>


import { AsamTreeV2 } from '@asam-ui/ui';
// Adapted from the fixed upstream MIT example: tree-v2/basic.vue

interface Tree {
	id: string;
	label: string;
	children?: Tree[];
}

const getKey = (prefix: string, id: number) => {
	return `${prefix}-${id}`;
};

const createData = (
	maxDeep: number,
	maxChildren: number,
	minNodesNumber: number,
	deep = 1,
	key = 'node'
): Tree[] => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined
			};
		});
};

const props = {
	value: 'id',
	label: 'label',
	children: 'children'
};
const data = createData(4, 30, 40);
</script>

许可

vue

<template>
	<AsamTreeV2 style="max-width: 600px" :data="data" :props="props" :height="200" />
</template>

<script setup>


import { AsamTreeV2 } from '@asam-ui/ui';
const getKey = (prefix, id) => {
	return `${prefix}-${id}`;
};
const createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined
			};
		});
};
const props = {
	value: 'id',
	label: 'label',
	children: 'children'
};
const data = createData(4, 30, 40);
</script>

可选择的虚拟树

适用于需要选择层级时使用。

可选择的虚拟树

许可

vue

<template>
	<AsamTreeV2 style="max-width: 600px" :data="data" :props="props" show-checkbox :height="200" />
</template>

<script lang="ts" setup>


import { AsamTreeV2 } from '@asam-ui/ui';
// Adapted from the fixed upstream MIT example: tree-v2/selectable.vue

interface Tree {
	id: string;
	label: string;
	children?: Tree[];
}

const getKey = (prefix: string, id: number) => {
	return `${prefix}-${id}`;
};

const createData = (
	maxDeep: number,
	maxChildren: number,
	minNodesNumber: number,
	deep = 1,
	key = 'node'
): Tree[] => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined
			};
		});
};

const props = {
	value: 'id',
	label: 'label',
	children: 'children'
};
const data = createData(4, 30, 40);
</script>

许可

vue

<template>
	<AsamTreeV2 style="max-width: 600px" :data="data" :props="props" show-checkbox :height="200" />
</template>

<script setup>


import { AsamTreeV2 } from '@asam-ui/ui';
const getKey = (prefix, id) => {
	return `${prefix}-${id}`;
};
const createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined
			};
		});
};
const props = {
	value: 'id',
	label: 'label',
	children: 'children'
};
const data = createData(4, 30, 40);
</script>

使用提示

使用 show-checkbox 时，check-on-click-leaf 默认为 true，点击叶子节点本身即可切换其选中状态。

禁用复选框

节点的复选框可以设置为禁用。

在示例中，属性在 defaultProps 中声明了 disabled，一些节点被设置为 disabled：true。相应的复选框已禁用，不能点击。

禁用复选框

许可

vue

<template>
	<AsamTreeV2 style="max-width: 600px" :data="data" :props="props" show-checkbox :height="200" />
</template>

<script lang="ts" setup>


import { AsamTreeV2 } from '@asam-ui/ui';
// Adapted from the fixed upstream MIT example: tree-v2/disabled.vue

interface Tree {
	id: string;
	label: string;
	children?: Tree[];
	disabled: boolean;
}

const getKey = (prefix: string, id: number) => {
	return `${prefix}-${id}`;
};

const createData = (
	maxDeep: number,
	maxChildren: number,
	minNodesNumber: number,
	deep = 1,
	key = 'node'
): Tree[] => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined,
				disabled: nodeKey.includes('2')
			};
		});
};

const props = {
	value: 'id',
	label: 'label',
	children: 'children',
	disabled: 'disabled'
};
const data = createData(4, 30, 40);
</script>

许可

vue

<template>
	<AsamTreeV2 style="max-width: 600px" :data="data" :props="props" show-checkbox :height="200" />
</template>

<script setup>


import { AsamTreeV2 } from '@asam-ui/ui';
const getKey = (prefix, id) => {
	return `${prefix}-${id}`;
};
const createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined,
				disabled: nodeKey.includes('2')
			};
		});
};
const props = {
	value: 'id',
	label: 'label',
	children: 'children',
	disabled: 'disabled'
};
const data = createData(4, 30, 40);
</script>

默认扩展和默认检查

树节点可以在初始化阶段被设置为展开或选中。

分别通过 default-expanded-keys 和 default-checked-keys 设置默认展开和默认选中的节点。

默认扩展和默认检查

许可

vue

<template>
	<AsamTreeV2
		style="max-width: 600px"
		:data="data"
		:height="200"
		:props="props"
		show-checkbox
		:default-checked-keys="defaultCheckedKeys"
		:default-expanded-keys="defaultExpandedKeys"
	/>
</template>

<script lang="ts" setup>


import { AsamTreeV2 } from '@asam-ui/ui';
// Adapted from the fixed upstream MIT example: tree-v2/default-state.vue

import { ref } from 'vue';

interface Tree {
	id: string;
	label: string;
	children?: Tree[];
}

const getKey = (prefix: string, id: number) => {
	return `${prefix}-${id}`;
};

const createData = (
	maxDeep: number,
	maxChildren: number,
	minNodesNumber: number,
	deep = 1,
	key = 'node'
): Tree[] => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined
			};
		});
};

const props = {
	value: 'id',
	label: 'label',
	children: 'children'
};
const data = createData(4, 30, 40);
const checkedKeys: string[] = [];
const expanedKeys: string[] = [];
for (const datum of data) {
	const children = datum.children;
	if (children) {
		expanedKeys.push(datum.id);
		checkedKeys.push(children[0].id);
		break;
	}
}

const defaultCheckedKeys = ref(checkedKeys);
const defaultExpandedKeys = ref(expanedKeys);
</script>

许可

vue

<template>
	<AsamTreeV2
		style="max-width: 600px"
		:data="data"
		:height="200"
		:props="props"
		show-checkbox
		:default-checked-keys="defaultCheckedKeys"
		:default-expanded-keys="defaultExpandedKeys"
	/>
</template>

<script setup>


import { AsamTreeV2 } from '@asam-ui/ui';
// Adapted from the fixed upstream MIT example: tree-v2/default-state.vue
import { ref } from 'vue';
const getKey = (prefix, id) => {
	return `${prefix}-${id}`;
};
const createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined
			};
		});
};
const props = {
	value: 'id',
	label: 'label',
	children: 'children'
};
const data = createData(4, 30, 40);
const checkedKeys = [];
const expanedKeys = [];
for (const datum of data) {
	const children = datum.children;
	if (children) {
		expanedKeys.push(datum.id);
		checkedKeys.push(children[0].id);
		break;
	}
}
const defaultCheckedKeys = ref(checkedKeys);
const defaultExpandedKeys = ref(expanedKeys);
</script>

自定义节点内容

节点的内容支持自定义，可以在节点区添加按钮或图标等内容

自定义节点内容

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamTreeV2 style="max-width: 600px" :data="data" :props="props" :height="200">
		<template #default="{ node }">
			<AsamIcon class="el-icon--left">
				<Document v-if="node.isLeaf" />
				<Folder v-else-if="!node.expanded" />
				<FolderOpened v-else />
			</AsamIcon>
			<span class="prefix" :class="{ 'is-leaf': node.isLeaf }">[ElementPlus]</span>
			<span>{{ node.label }}</span>
		</template>
	</AsamTreeV2>
</template>

<script lang="ts" setup>


import { AsamTreeV2, AsamIcon } from '@asam-ui/ui';
// Adapted from the fixed upstream MIT example: tree-v2/custom-node.vue

import { Document, Folder, FolderOpened } from '@asam-ui/icons-vue';

interface Tree {
	id: string;
	label: string;
	children?: Tree[];
}

const getKey = (prefix: string, id: number) => {
	return `${prefix}-${id}`;
};

const createData = (
	maxDeep: number,
	maxChildren: number,
	minNodesNumber: number,
	deep = 1,
	key = 'node'
): Tree[] => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined
			};
		});
};

const props = {
	value: 'id',
	label: 'label',
	children: 'children'
};
const data = createData(4, 30, 40);
</script>

<style scoped>
.prefix {
	color: var(--el-color-primary);
	margin-right: 10px;
}

.prefix.is-leaf {
	color: var(--el-color-success);
}
</style>

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamTreeV2 style="max-width: 600px" :data="data" :props="props" :height="200">
		<template #default="{ node }">
			<AsamIcon class="el-icon--left">
				<Document v-if="node.isLeaf" />
				<Folder v-else-if="!node.expanded" />
				<FolderOpened v-else />
			</AsamIcon>
			<span class="prefix" :class="{ 'is-leaf': node.isLeaf }">[ElementPlus]</span>
			<span>{{ node.label }}</span>
		</template>
	</AsamTreeV2>
</template>

<script setup>


import { AsamTreeV2, AsamIcon } from '@asam-ui/ui';
// Adapted from the fixed upstream MIT example: tree-v2/custom-node.vue
import { Document, Folder, FolderOpened } from '@asam-ui/icons-vue';
const getKey = (prefix, id) => {
	return `${prefix}-${id}`;
};
const createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined
			};
		});
};
const props = {
	value: 'id',
	label: 'label',
	children: 'children'
};
const data = createData(4, 30, 40);
</script>

<style scoped>
.prefix {
	color: var(--el-color-primary);
	margin-right: 10px;
}

.prefix.is-leaf {
	color: var(--el-color-success);
}
</style>

自定义节点类名

节点的类名支持自定义。

自定义节点类名

许可

vue

<template>
	<AsamTreeV2
		style="max-width: 600px"
		:data="data"
		show-checkbox
		:expand-on-click-node="false"
		:props="{ class: customNodeClass }"
	/>
</template>

<script lang="ts" setup>


import { AsamTreeV2 } from '@asam-ui/ui';
// Adapted from the fixed upstream MIT example: tree-v2/custom-node-class.vue

import type { AsamTreeV2Node, AsamTreeV2NodeData } from '@asam-ui/ui';

interface Tree {
	id?: string;
	value?: string;
	label?: string;
	isPenultimate?: boolean;
	children?: Tree[];
}

const customNodeClass = ({ isPenultimate }: AsamTreeV2NodeData, _node: AsamTreeV2Node) =>
	isPenultimate ? 'is-penultimate' : '';

const data: Tree[] = [
	{
		id: '1',
		label: '一级节点 1',
		children: [
			{
				id: '4',
				label: '二级节点 1-1',
				isPenultimate: true,
				children: [
					{
						id: '9',
						label: '三级节点 1-1-1'
					},
					{
						id: '10',
						label: '三级节点 1-1-2'
					}
				]
			}
		]
	},
	{
		id: '2',
		label: '一级节点 2',
		isPenultimate: true,
		children: [
			{
				id: '5',
				label: '二级节点 2-1'
			},
			{
				id: '6',
				label: '二级节点 2-2'
			}
		]
	},
	{
		id: '3',
		label: '一级节点 3',
		isPenultimate: true,
		children: [
			{
				id: '7',
				label: '二级节点 3-1'
			},
			{
				id: '8',
				label: '二级节点 3-2'
			}
		]
	}
];
</script>

<style scoped>
:deep(.is-penultimate .el-tree-node__label) {
	color: #626aef;
	font-weight: 600;
}
</style>

许可

vue

<template>
	<AsamTreeV2
		style="max-width: 600px"
		:data="data"
		show-checkbox
		:expand-on-click-node="false"
		:props="{ class: customNodeClass }"
	/>
</template>

<script setup>


import { AsamTreeV2 } from '@asam-ui/ui';
const customNodeClass = ({ isPenultimate }, _node) => (isPenultimate ? 'is-penultimate' : '');
const data = [
	{
		id: '1',
		label: '一级节点 1',
		children: [
			{
				id: '4',
				label: '二级节点 1-1',
				isPenultimate: true,
				children: [
					{
						id: '9',
						label: '三级节点 1-1-1'
					},
					{
						id: '10',
						label: '三级节点 1-1-2'
					}
				]
			}
		]
	},
	{
		id: '2',
		label: '一级节点 2',
		isPenultimate: true,
		children: [
			{
				id: '5',
				label: '二级节点 2-1'
			},
			{
				id: '6',
				label: '二级节点 2-2'
			}
		]
	},
	{
		id: '3',
		label: '一级节点 3',
		isPenultimate: true,
		children: [
			{
				id: '7',
				label: '二级节点 3-1'
			},
			{
				id: '8',
				label: '二级节点 3-2'
			}
		]
	}
];
</script>

<style scoped>
:deep(.is-penultimate .el-tree-node__label) {
	color: #626aef;
	font-weight: 600;
}
</style>

自定义节点图标

您可以自定义不同节点状态的图标。树节点暴露了 expanded 属性和 isLeaf 属性，允许你根据节点的状态动态渲染不同的图标：叶子节点、展开的节点或折叠的节点。

自定义节点图标

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamTreeV2 style="max-width: 600px" :data="data" :props="props" :height="200">
		<template #default="{ node }">
			<AsamIcon class="node-icon" :class="{ 'is-leaf': node.isLeaf }">
				<Document v-if="node.isLeaf" />
				<Folder v-else-if="!node.expanded" />
				<FolderOpened v-else />
			</AsamIcon>
			<span>{{ node.label }}</span>
		</template>
	</AsamTreeV2>
</template>

<script lang="ts" setup>


import { AsamTreeV2, AsamIcon } from '@asam-ui/ui';
// Adapted from the fixed upstream MIT example: tree-v2/custom-icon.vue

import { Document, Folder, FolderOpened } from '@asam-ui/icons-vue';

interface Tree {
	id: string;
	label: string;
	children?: Tree[];
}

const getKey = (prefix: string, id: number) => {
	return `${prefix}-${id}`;
};

const createData = (
	maxDeep: number,
	maxChildren: number,
	minNodesNumber: number,
	deep = 1,
	key = 'node'
): Tree[] => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined
			};
		});
};

const props = {
	value: 'id',
	label: 'label',
	children: 'children'
};
const data = createData(4, 30, 40);
</script>

<style scoped>
.node-icon {
	margin-right: 5px;
	color: var(--el-color-warning);
}
</style>

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamTreeV2 style="max-width: 600px" :data="data" :props="props" :height="200">
		<template #default="{ node }">
			<AsamIcon class="node-icon" :class="{ 'is-leaf': node.isLeaf }">
				<Document v-if="node.isLeaf" />
				<Folder v-else-if="!node.expanded" />
				<FolderOpened v-else />
			</AsamIcon>
			<span>{{ node.label }}</span>
		</template>
	</AsamTreeV2>
</template>

<script setup>


import { AsamTreeV2, AsamIcon } from '@asam-ui/ui';
// Adapted from the fixed upstream MIT example: tree-v2/custom-icon.vue
import { Document, Folder, FolderOpened } from '@asam-ui/icons-vue';
const getKey = (prefix, id) => {
	return `${prefix}-${id}`;
};
const createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined
			};
		});
};
const props = {
	value: 'id',
	label: 'label',
	children: 'children'
};
const data = createData(4, 30, 40);
</script>

<style scoped>
.node-icon {
	margin-right: 5px;
	color: var(--el-color-warning);
}
</style>

树节点过滤

filter-method 的第三个参数自 2.9.1 版本起提供。树节点是可以被过滤的

在需要对节点进行过滤时，调用 Tree 实例的 filter 方法，参数为关键字。需要注意的是，此时需要设置 filter-method，值为过滤函数。

树节点过滤

许可

vue

<template>
	<div class="demo-root-layout">
		<AsamInput
			:model-value="query"
			style="width: 240px"
			placeholder="请输入关键字"
			@update:model-value="onQueryChanged"
		/>
		<AsamTreeV2
			ref="treeRef"
			style="max-width: 600px"
			:data="data"
			:props="props"
			:filter-method="filterMethod"
			:height="200"
		/>
	</div>
</template>

<script lang="ts" setup>


import { AsamInput, AsamTreeV2 } from '@asam-ui/ui';
// Adapted from the fixed upstream MIT example: tree-v2/filter.vue

import { ref } from 'vue';

import type { AsamInputEmits, AsamTreeV2NodeData, AsamTreeV2Instance } from '@asam-ui/ui';

interface Tree {
	id: string;
	label: string;
	children?: Tree[];
}

const getKey = (prefix: string, id: number) => `${prefix}-${id}`;

const createData = (
	maxDeep: number,
	maxChildren: number,
	minNodesNumber: number,
	deep = 1,
	key = 'node'
): Tree[] => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined
			};
		});
};

const query = ref('');
const treeRef = ref<AsamTreeV2Instance>();
const data = createData(4, 30, 5);
const props = {
	value: 'id',
	label: 'label',
	children: 'children'
};

const onQueryChanged = (value: AsamInputEmits['update:modelValue'][0]) => {
	query.value = String(value);
	treeRef.value!.filter(query.value);
};
const filterMethod = (query: string, node: AsamTreeV2NodeData) => node.label!.includes(query);
</script>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

许可

vue

<template>
	<div class="demo-root-layout">
		<AsamInput
			:model-value="query"
			style="width: 240px"
			placeholder="请输入关键字"
			@update:model-value="onQueryChanged"
		/>
		<AsamTreeV2
			ref="treeRef"
			style="max-width: 600px"
			:data="data"
			:props="props"
			:filter-method="filterMethod"
			:height="200"
		/>
	</div>
</template>

<script setup>


import { AsamInput, AsamTreeV2 } from '@asam-ui/ui';
// Adapted from the fixed upstream MIT example: tree-v2/filter.vue
import { ref } from 'vue';
const getKey = (prefix, id) => `${prefix}-${id}`;
const createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {
	let id = 0;
	return Array.from({ length: minNodesNumber })
		.fill(deep)
		.map(() => {
			const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
			const nodeKey = getKey(key, ++id);
			return {
				id: nodeKey,
				label: nodeKey.replace(/^node/, '节点'),
				children: childrenNumber
					? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
					: undefined
			};
		});
};
const query = ref('');
const treeRef = ref();
const data = createData(4, 30, 5);
const props = {
	value: 'id',
	label: 'label',
	children: 'children'
};
const onQueryChanged = (value) => {
	query.value = String(value);
	treeRef.value.filter(query.value);
};
const filterMethod = (query, node) => node.label.includes(query);
</script>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

TreeV2 API

属性

名称	说明	类型	默认值
data	展示数据	array`Array<{[key: string]: any}>`	—
empty-text	内容为空的时候展示的文本	string	—
props	配置选项，具体看下表	object	—
highlight-current	是否高亮当前选中节点	boolean	false
expand-on-click-node	是否在点击节点的时候展开或者收缩节点，默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点	boolean	true
check-on-click-node	是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点	boolean	false
check-on-click-leaf	点击叶节点(最后一个子节点)时是否检查或取消节点	boolean	true
default-expanded-keys	默认展开的节点的 key 的数组	array`Array<string \| number>`	—
show-checkbox	节点是否可被选择	boolean	false
check-strictly	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false	boolean	false
default-checked-keys	默认勾选的节点的 key 的数组	array`Array<string \| number>`	—
current-node-key	当前选中的节点	string / number	—
filter-method	对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏	Function`(query: string, data: AsamTreeV2NodeData, node: AsamTreeV2Node) => boolean`	—
indent	相邻级节点间的水平缩进，单位为像素	number	16
icon	自定义树节点图标组件	string / Component	—
item-size	自定义树节点的高度	number	26
scrollbar-always-on	总是显示滚动条	boolean	false
height	tree 的高度	number	200

节点字段映射

属性	说明	类型	默认值
value	每个树节点用来作为唯一标识的属性，在整棵树中应该是唯一的	string	id
label	指定节点标签为节点对象的某个属性值	string	label
children	指定子树为节点对象的某个属性值	string	children
disabled	指定节点选择框是否禁用为节点对象的某个属性值	string	disabled
class	自定义节点类名	string / Function`(data: AsamTreeV2NodeData, node: AsamTreeV2Node) => string \| {[key: string]: boolean}`	—

实例方法与状态

Tree 组件有以下方法，均返回当前选中的节点数组

方法	说明	参数
filter	过滤所有树节点，过滤后的节点将被隐藏	`(query: string)`
getCheckedNodes	如果节点可以被选中，(show-checkbox 为 true), 本方法将返回当前选中节点的数组	`(leafOnly: boolean)`
getCheckedKeys	若节点可用被选中 (show-checkbox 为 true), 它将返回当前选中节点 key 的数组	`(leafOnly: boolean)`
setCheckedKeys	通过 keys 设置目前勾选的节点	`(keys: AsamTreeKey[])`
setChecked	设置节点是否选中；`deep` 控制是否递归选中或取消选中子节点。	`(key: AsamTreeKey, checked: boolean, deep?: boolean)`
setExpandedKeys	设置当前展开的节点	`(keys: AsamTreeKey[])`
getHalfCheckedNodes	如果节点可用被选中 (show-checkbox 为 true), 它将返回当前半选中的节点组成的数组	—
getHalfCheckedKeys	若节点可被选中(show-checkbox 为 true)，则返回目前半选中的节点的 key 所组成的数组	—
getCurrentKey	获取当前被选中节点的 key，若没有节点被选中则返回 undefined	—
getCurrentNode	获取当前被选中节点的 data，若没有节点被选中则返回 undefined	—
setCurrentKey	通过 key 设置某个节点的当前选中状态	`(key: AsamTreeKey)`
getNode	通过 key 或 data 获取节点	`(data: AsamTreeKey \| AsamTreeV2NodeData)`
expandNode	展开指定节点	`(node: AsamTreeV2Node)`
collapseNode	折叠指定节点	`(node: AsamTreeV2Node)`
setData	当数据量非常庞大的时候，总是使用响应式数据将导致性能表现不佳，所以我们提供一种显式设置的方式来避免此种情况	`(data: AsamTreeV2NodeData[])`
scrollTo	滚动到给定位置	`(offset: number)`
scrollToNode	使用给定的滚动策略滚动至指定位置	`(key: AsamTreeKey, strategy?: auto \| smart \| center \| start \| end)`

事件

名称	说明	参数
node-click	当节点被点击的时候触发	`(data: AsamTreeV2NodeData, node: AsamTreeV2Node, e: MouseEvent)`
node-drop	拖放到节点时触发器	`(data: AsamTreeV2NodeData, node: AsamTreeV2Node, e: DragEvent)`
node-contextmenu	当某一节点被鼠标右键点击时会触发该事件	`(e: Event, data: AsamTreeV2NodeData, node: AsamTreeV2Node)`
check-change	当复选框被点击的时候触发	`(data: AsamTreeV2NodeData, checked: boolean)`
check	点击节点复选框之后触发	`(data: AsamTreeV2NodeData, info: { checkedKeys: AsamTreeKey[],checkedNodes: AsamTreeV2NodeData[], halfCheckedKeys: AsamTreeKey[], halfCheckedNodes: AsamTreeV2NodeData[],})`
current-change	当前选中节点变化时触发的事件	`(data: AsamTreeV2NodeData, node: AsamTreeV2Node)`
node-expand	节点被展开时触发的事件	`(data: AsamTreeV2NodeData, node: AsamTreeV2Node)`
node-collapse	节点被关闭时触发的事件	`(data: AsamTreeV2NodeData, node: AsamTreeV2Node)`

插槽

名称	说明	类型
default	自定义树节点的内容。	object`{ node: AsamTreeV2Node, data: AsamTreeV2NodeData }`
empty	当数据为空时自定义的内容	—

API

属性 `AsamTreeV2Props`

属性名	说明	类型	默认值
`data`	展示数据	`AsamTreeV2Expose["data"] \| undefined`	`工厂函数（每个实例创建）`
`emptyText`	内容为空的时候展示的文本	`string \| undefined`	—
`height`	tree 的高度	`number \| undefined`	`200`
`props`	配置选项，具体看下表	`AsamTreeV2Expose["props"] \| undefined`	`工厂函数（每个实例创建）`
`highlightCurrent`	是否高亮当前选中节点	`boolean \| undefined`	`false`
`showCheckbox`	节点是否可被选择	`boolean \| undefined`	`false`
`defaultCheckedKeys`	默认勾选的节点的 key 的数组	`AsamTreeV2Node["key"][] \| undefined`	`工厂函数（每个实例创建）`
`checkStrictly`	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false	`boolean \| undefined`	`false`
`defaultExpandedKeys`	默认展开的节点的 key 的数组	`AsamTreeV2Node["key"][] \| undefined`	`工厂函数（每个实例创建）`
`indent`	相邻级节点间的水平缩进，单位为像素	`number \| undefined`	`16`
`itemSize`	自定义树节点的高度	`number \| undefined`	`26`
`icon`	自定义树节点图标组件	`(AsamTreeV2Props)["icon"]`	—
`expandOnClickNode`	是否在点击节点的时候展开或者收缩节点，默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点	`boolean \| undefined`	`true`
`checkOnClickNode`	是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点	`boolean \| undefined`	`false`
`checkOnClickLeaf`	点击叶节点(最后一个子节点)时是否检查或取消节点	`boolean \| undefined`	`true`
`currentNodeKey`	当前选中的节点	`string \| number \| undefined`	—
`accordion`	—	`boolean \| undefined`	`false`
`filterMethod`	对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏	`(AsamTreeV2Props)["filterMethod"]`	—
`perfMode`	—	`boolean \| undefined`	`true`
`scrollbarAlwaysOn`	总是显示滚动条	`boolean \| undefined`	`false`
`onCheck-change`	—	`((data: AsamTreeNodeData, checked: boolean) => any) \| undefined`	—
`onCurrent-change`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) \| undefined`	—
`onNode-click`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node, e: MouseEvent) => any) \| undefined`	—
`onNode-contextmenu`	—	`((evt: Event, data: AsamTreeNodeData, node: AsamTreeV2Node) => any) \| undefined`	—
`onNode-collapse`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) \| undefined`	—
`onNode-expand`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) \| undefined`	—
`onCheck`	—	`(AsamTreeV2Props)["onCheck"]`	—
`onNode-drop`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node, e: DragEvent) => any) \| undefined`	—
`key`	—	`PropertyKey \| undefined`	—
`ref`	—	`VNodeRef \| undefined`	—
`ref_for`	—	`boolean \| undefined`	—
`ref_key`	—	`string \| undefined`	—
`onVnodeBeforeMount`	—	`(AsamTreeV2Props)["onVnodeBeforeMount"]`	—
`onVnodeMounted`	—	`(AsamTreeV2Props)["onVnodeMounted"]`	—
`onVnodeBeforeUpdate`	—	`(AsamTreeV2Props)["onVnodeBeforeUpdate"]`	—
`onVnodeUpdated`	—	`(AsamTreeV2Props)["onVnodeUpdated"]`	—
`onVnodeBeforeUnmount`	—	`(AsamTreeV2Props)["onVnodeBeforeUnmount"]`	—
`onVnodeUnmounted`	—	`(AsamTreeV2Props)["onVnodeUnmounted"]`	—
`class`	—	`unknown`	—
`style`	—	`unknown`	—

实例方法与状态 `AsamTreeV2Expose`

属性名	说明	类型	默认值
`$`	—	`AsamTreeV2Expose["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`AsamTreeV2Props`	—
`$attrs`	—	`AsamTreeV2Expose["$attrs"]`	—
`$refs`	—	`AsamTreeV2Expose["$refs"]`	—
`$slots`	—	`(AsamTreeV2Expose)["$slots"]`	—
`$root`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$parent`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$host`	—	`Element \| null`	—
`$emit`	—	`(AsamTreeV2Expose)["$emit"]`	—
`$el`	—	`any`	—
`$options`	—	`(AsamTreeV2Expose)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamTreeV2Expose)["$nextTick"]`	—
`$watch`	—	`(AsamTreeV2Expose)["$watch"]`	—
`props`	—	`AsamTreeV2Expose["props"]`	—
`data`	—	`AsamTreeV2Expose["data"]`	—
`defaultCheckedKeys`	—	`AsamTreeV2Node["key"][]`	—
`defaultExpandedKeys`	—	`AsamTreeV2Node["key"][]`	—
`height`	—	`number`	—
`perfMode`	—	`boolean`	—
`itemSize`	—	`number`	—
`checkOnClickLeaf`	—	`boolean`	—
`indent`	—	`number`	—
`expandOnClickNode`	—	`boolean`	—
`emptyText`	—	`string \| undefined`	—
`scrollbarAlwaysOn`	总是显示滚动条	`boolean \| undefined`	—
`onCurrent-change`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) \| undefined`	—
`icon`	—	`(AsamTreeV2Expose)["icon"]`	—
`accordion`	—	`boolean \| undefined`	—
`filterMethod`	—	`(AsamTreeV2Expose)["filterMethod"]`	—
`checkStrictly`	—	`boolean \| undefined`	—
`checkOnClickNode`	—	`boolean \| undefined`	—
`currentNodeKey`	—	`string \| number \| undefined`	—
`showCheckbox`	—	`boolean \| undefined`	—
`highlightCurrent`	—	`boolean \| undefined`	—
`onCheck-change`	—	`((data: AsamTreeNodeData, checked: boolean) => any) \| undefined`	—
`onNode-click`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node, e: MouseEvent) => any) \| undefined`	—
`onNode-contextmenu`	—	`((evt: Event, data: AsamTreeNodeData, node: AsamTreeV2Node) => any) \| undefined`	—
`onNode-collapse`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) \| undefined`	—
`onNode-expand`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) \| undefined`	—
`onCheck`	—	`(AsamTreeV2Expose)["onCheck"]`	—
`onNode-drop`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node, e: DragEvent) => any) \| undefined`	—
`toggleCheckbox`	—	`(AsamTreeV2Expose)["toggleCheckbox"]`	—
`getCurrentNode`	—	`() => AsamTreeV2NodeData \| undefined`	—
`getCurrentKey`	—	`() => AsamTreeV2Node["key"] \| undefined`	—
`setCurrentKey`	—	`(key: AsamTreeV2Node["key"]) => void`	—
`getCheckedKeys`	—	`(leafOnly?: boolean) => AsamTreeV2Node["key"][]`	—
`getCheckedNodes`	—	`(leafOnly?: boolean) => AsamTreeV2NodeData[]`	—
`getHalfCheckedKeys`	—	`() => AsamTreeV2Node["key"][]`	—
`getHalfCheckedNodes`	—	`() => AsamTreeV2NodeData[]`	—
`setChecked`	—	`(key: AsamTreeV2Node["key"], isChecked: boolean, deep?: boolean) => void`	—
`setCheckedKeys`	—	`(keys: AsamTreeV2Node["key"][]) => void`	—
`filter`	—	`(query: string) => void`	—
`setData`	—	`(data: AsamTreeV2Expose["data"]) => void`	—
`getNode`	—	`(data: AsamTreeV2Node["key"] \| AsamTreeV2NodeData) => AsamTreeV2Node \| undefined`	—
`expandNode`	—	`(node: AsamTreeV2Node) => void`	—
`collapseNode`	—	`(node: AsamTreeV2Node) => void`	—
`setExpandedKeys`	—	`(keys: AsamTreeV2Node["key"][]) => void`	—
`scrollToNode`	—	`(key: AsamTreeV2Node["key"], strategy?: AsamDynamicSizeGridAlignment) => void`	—
`scrollTo`	—	`(offset: number) => void`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamTreeV2Expose["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamTreeV2Expose["$router"]`	—

类型 `AsamTreeV2Instance`

属性名	说明	类型	默认值
`$`	—	`AsamTreeV2Expose["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`AsamTreeV2Props`	—
`$attrs`	—	`AsamTreeV2Expose["$attrs"]`	—
`$refs`	—	`AsamTreeV2Expose["$refs"]`	—
`$slots`	—	`(AsamTreeV2Instance)["$slots"]`	—
`$root`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$parent`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$host`	—	`Element \| null`	—
`$emit`	—	`(AsamTreeV2Instance)["$emit"]`	—
`$el`	—	`any`	—
`$options`	—	`(AsamTreeV2Instance)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamTreeV2Instance)["$nextTick"]`	—
`$watch`	—	`(AsamTreeV2Instance)["$watch"]`	—
`props`	—	`AsamTreeV2Expose["props"]`	—
`data`	—	`AsamTreeV2Expose["data"]`	—
`defaultCheckedKeys`	—	`AsamTreeV2Node["key"][]`	—
`defaultExpandedKeys`	—	`AsamTreeV2Node["key"][]`	—
`height`	—	`number`	—
`perfMode`	—	`boolean`	—
`itemSize`	—	`number`	—
`checkOnClickLeaf`	—	`boolean`	—
`indent`	—	`number`	—
`expandOnClickNode`	—	`boolean`	—
`emptyText`	—	`string \| undefined`	—
`scrollbarAlwaysOn`	总是显示滚动条	`boolean \| undefined`	—
`onCurrent-change`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) \| undefined`	—
`icon`	—	`(AsamTreeV2Instance)["icon"]`	—
`accordion`	—	`boolean \| undefined`	—
`filterMethod`	—	`(AsamTreeV2Instance)["filterMethod"]`	—
`checkStrictly`	—	`boolean \| undefined`	—
`checkOnClickNode`	—	`boolean \| undefined`	—
`currentNodeKey`	—	`string \| number \| undefined`	—
`showCheckbox`	—	`boolean \| undefined`	—
`highlightCurrent`	—	`boolean \| undefined`	—
`onCheck-change`	—	`((data: AsamTreeNodeData, checked: boolean) => any) \| undefined`	—
`onNode-click`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node, e: MouseEvent) => any) \| undefined`	—
`onNode-contextmenu`	—	`((evt: Event, data: AsamTreeNodeData, node: AsamTreeV2Node) => any) \| undefined`	—
`onNode-collapse`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) \| undefined`	—
`onNode-expand`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) \| undefined`	—
`onCheck`	—	`(AsamTreeV2Instance)["onCheck"]`	—
`onNode-drop`	—	`((data: AsamTreeNodeData, node: AsamTreeV2Node, e: DragEvent) => any) \| undefined`	—
`toggleCheckbox`	—	`(AsamTreeV2Instance)["toggleCheckbox"]`	—
`getCurrentNode`	—	`() => AsamTreeV2NodeData \| undefined`	—
`getCurrentKey`	—	`() => AsamTreeV2Node["key"] \| undefined`	—
`setCurrentKey`	—	`(key: AsamTreeV2Node["key"]) => void`	—
`getCheckedKeys`	—	`(leafOnly?: boolean) => AsamTreeV2Node["key"][]`	—
`getCheckedNodes`	—	`(leafOnly?: boolean) => AsamTreeV2NodeData[]`	—
`getHalfCheckedKeys`	—	`() => AsamTreeV2Node["key"][]`	—
`getHalfCheckedNodes`	—	`() => AsamTreeV2NodeData[]`	—
`setChecked`	—	`(key: AsamTreeV2Node["key"], isChecked: boolean, deep?: boolean) => void`	—
`setCheckedKeys`	—	`(keys: AsamTreeV2Node["key"][]) => void`	—
`filter`	—	`(query: string) => void`	—
`setData`	—	`(data: AsamTreeV2Expose["data"]) => void`	—
`getNode`	—	`(data: AsamTreeV2Node["key"] \| AsamTreeV2NodeData) => AsamTreeV2Node \| undefined`	—
`expandNode`	—	`(node: AsamTreeV2Node) => void`	—
`collapseNode`	—	`(node: AsamTreeV2Node) => void`	—
`setExpandedKeys`	—	`(keys: AsamTreeV2Node["key"][]) => void`	—
`scrollToNode`	—	`(key: AsamTreeV2Node["key"], strategy?: AsamDynamicSizeGridAlignment) => void`	—
`scrollTo`	—	`(offset: number) => void`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamTreeV2Expose["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamTreeV2Expose["$router"]`	—

插槽 `AsamTreeV2Slots`

属性名	说明	类型	默认值
`default`	—	`((scope: { node: AsamTreeV2Node; data: AsamTreeV2NodeData; }) => VNode[]) \| undefined`	—
`empty`	—	`(() => VNode[]) \| undefined`	—

类型 `AsamTreeV2Node`

属性名	说明	类型	默认值
`key`	—	`AsamTreeV2Node["key"]`	—
`level`	—	`number`	—
`parent`	—	`AsamTreeV2Node \| undefined`	—
`children`	—	`AsamTreeV2Node[] \| undefined`	—
`data`	—	`AsamTreeV2NodeData`	—
`disabled`	—	`boolean \| undefined`	—
`label`	—	`string \| undefined`	—
`isLeaf`	—	`boolean \| undefined`	—
`expanded`	—	`boolean \| undefined`	—
`isEffectivelyChecked`	判断节点是否按原生规则有效选中：禁用叶节点视为选中，其他叶节点按实际状态判断；非叶节点要求所有子节点按同一规则有效选中。此处描述原生语义，不额外接管算法。	`boolean \| undefined`	—

类型 `AsamTreeV2NodeData`

用法与契约补充说明

使用约定

height/itemSize 指定视窗与行高，data 与 props 映射实际字段，节点 key 对应 props.value。showCheckbox、checkStrictly、defaultExpandedKeys/defaultCheckedKeys、filterMethod 及节点事件按本入口契约使用。default 插槽提供 node/data，empty 处理空数据；实例过滤、勾选、展开、滚动等能力以公开 Expose 为准。它没有 Tree 的 lazy/load 契约，宿主先准备数据。行高不属于四档控件密度。

参数与事件补充说明

公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。

参数与事件说明

`data`

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

默认值与来源

工厂函数（每个实例创建）（实例工厂；已安装组件）

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

`emptyText`

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

默认值与来源

未知 / 未声明

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

`height`

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

默认值与来源

200（已安装运行时；已安装组件）

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

`props`

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

props 参数与事件数据

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

props.children: string | undefined — 上游声明
指定子树为节点对象的某个属性值
固定上游文档默认：children（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.label: string | undefined — 上游声明
指定节点标签为节点对象的某个属性值
固定上游文档默认：label（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.value: string | undefined — 上游声明
每个树节点用来作为唯一标识的属性，在整棵树中应该是唯一的
固定上游文档默认：id（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.disabled: string | undefined — 上游声明
指定节点选择框是否禁用为节点对象的某个属性值
固定上游文档默认：disabled（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.class: string | ((data: AsamTreeV2NodeData, node: AsamTreeV2Node) => string | { [key: string]: boolean; }) | undefined — 上游声明
自定义节点类名
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
事件参数：(data: AsamTreeV2NodeData, node: AsamTreeV2Node): string | { [key: string]: boolean; }

默认值与来源

工厂函数（每个实例创建）（实例工厂；已安装组件）

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

`highlightCurrent`

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

highlightCurrent 参数与事件数据

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

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

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

`showCheckbox`

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

showCheckbox 参数与事件数据

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

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

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

`defaultCheckedKeys`

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

默认值与来源

工厂函数（每个实例创建）（实例工厂；已安装组件）

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

`checkStrictly`

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

checkStrictly 参数与事件数据

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

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

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

`defaultExpandedKeys`

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

默认值与来源

工厂函数（每个实例创建）（实例工厂；已安装组件）

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

`indent`

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

默认值与来源

16（已安装运行时；已安装组件）

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

`itemSize`

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

默认值与来源

26（已安装运行时；已安装组件）

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

`icon`

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

icon 参数与事件数据

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

事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamTreeV2Props)["icon"]>, (...args: never[]) => unknown>>[1]): any

icon.__isFragment: undefined — 依赖声明
icon.__isTeleport: undefined — 依赖声明
icon.__isSuspense: undefined — 依赖声明

默认值与来源

未知 / 未声明

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

`expandOnClickNode`

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

expandOnClickNode 参数与事件数据

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

枚举：false / true

默认值与来源

true（已安装运行时；已安装组件）

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

`checkOnClickNode`

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

checkOnClickNode 参数与事件数据

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

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

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

`checkOnClickLeaf`

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

checkOnClickLeaf 参数与事件数据

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

枚举：false / true

默认值与来源

true（已安装运行时；已安装组件）

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

`currentNodeKey`

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

默认值与来源

未知 / 未声明

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

`accordion`

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

accordion 参数与事件数据

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

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

`filterMethod`

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

filterMethod 参数与事件数据

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

事件参数：(query: string, data: AsamTreeV2NodeData, node: AsamTreeV2Node): boolean

默认值与来源

未知 / 未声明

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

`perfMode`

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

perfMode 参数与事件数据

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

枚举：false / true

默认值与来源

true（已安装运行时；已安装组件）

`scrollbarAlwaysOn`

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

scrollbarAlwaysOn 参数与事件数据

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

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

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

`onCheck-change`

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

onCheck-change 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, checked: boolean): any

`onCurrent-change`

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

onCurrent-change 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node): any

`onNode-click`

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

onNode-click 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node, e: MouseEvent): any

`onNode-contextmenu`

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

onNode-contextmenu 参数与事件数据

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

事件参数：(evt: Event, data: AsamTreeNodeData, node: AsamTreeV2Node): any

`onNode-collapse`

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

onNode-collapse 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node): any

`onNode-expand`

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

onNode-expand 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node): any

`onCheck`

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

onCheck 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, checkedInfo: Parameters<Extract<NonNullable<(AsamTreeV2Props)["onCheck"]>, (...args: never[]) => unknown>>[1]): any

`onNode-drop`

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

onNode-drop 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node, e: DragEvent): any

`key`

必填：否；声明来源：依赖声明。

`ref`

必填：否；声明来源：依赖声明。

ref 参数与事件数据

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

事件参数：(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void

ref.value: any — 依赖声明
ref.__@RefSymbol@8854: true — 依赖声明
仅用于区分类型：保留在公开声明中，通过私有 Symbol 避免出现在编辑器自动补全中。
枚举：true

`ref_for`

必填：否；声明来源：依赖声明。

ref_for 参数与事件数据

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

枚举：false / true

`ref_key`

必填：否；声明来源：依赖声明。

`onVnodeBeforeMount`

必填：否；声明来源：依赖声明。

onVnodeBeforeMount 参数与事件数据

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

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeMounted`

必填：否；声明来源：依赖声明。

onVnodeMounted 参数与事件数据

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

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeBeforeUpdate`

必填：否；声明来源：依赖声明。

onVnodeBeforeUpdate 参数与事件数据

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

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeUpdated`

必填：否；声明来源：依赖声明。

onVnodeUpdated 参数与事件数据

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

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeBeforeUnmount`

必填：否；声明来源：依赖声明。

onVnodeBeforeUnmount 参数与事件数据

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

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeUnmounted`

必填：否；声明来源：依赖声明。

onVnodeUnmounted 参数与事件数据

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

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`class`

必填：否；声明来源：依赖声明。

`style`

必填：否；声明来源：依赖声明。

AsamTreeV2Props 公开类型视图

import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamTreeV2Props, AsamTreeV2Expose, AsamTreeV2NodeData, AsamTreeV2Node, AsamTreeNodeData } from '@asam-ui/ui';

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

// AsamTreeV2Props
type PublicContract = {
	readonly "data"?: AsamTreeV2Expose["data"] | undefined;
	readonly "emptyText"?: string | undefined;
	readonly "height"?: number | undefined;
	readonly "props"?: AsamTreeV2Expose["props"] | undefined;
	readonly "highlightCurrent"?: boolean | undefined;
	readonly "showCheckbox"?: boolean | undefined;
	readonly "defaultCheckedKeys"?: AsamTreeV2Node["key"][] | undefined;
	readonly "checkStrictly"?: boolean | undefined;
	readonly "defaultExpandedKeys"?: AsamTreeV2Node["key"][] | undefined;
	readonly "indent"?: number | undefined;
	readonly "itemSize"?: number | undefined;
	readonly "icon"?: (AsamTreeV2Props)["icon"];
	readonly "expandOnClickNode"?: boolean | undefined;
	readonly "checkOnClickNode"?: boolean | undefined;
	readonly "checkOnClickLeaf"?: boolean | undefined;
	readonly "currentNodeKey"?: string | number | undefined;
	readonly "accordion"?: boolean | undefined;
	readonly "filterMethod"?: (AsamTreeV2Props)["filterMethod"];
	readonly "perfMode"?: boolean | undefined;
	readonly "scrollbarAlwaysOn"?: boolean | undefined;
	readonly "onCheck-change"?: ((data: AsamTreeNodeData, checked: boolean) => any) | undefined;
	readonly "onCurrent-change"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) | undefined;
	readonly "onNode-click"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node, e: MouseEvent) => any) | undefined;
	readonly "onNode-contextmenu"?: ((evt: Event, data: AsamTreeNodeData, node: AsamTreeV2Node) => any) | undefined;
	readonly "onNode-collapse"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) | undefined;
	readonly "onNode-expand"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) | undefined;
	readonly "onCheck"?: (AsamTreeV2Props)["onCheck"];
	readonly "onNode-drop"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node, e: DragEvent) => any) | undefined;
	"key"?: PropertyKey | undefined;
	"ref"?: VNodeRef | undefined;
	"ref_for"?: boolean | undefined;
	"ref_key"?: string | undefined;
	"onVnodeBeforeMount"?: (AsamTreeV2Props)["onVnodeBeforeMount"];
	"onVnodeMounted"?: (AsamTreeV2Props)["onVnodeMounted"];
	"onVnodeBeforeUpdate"?: (AsamTreeV2Props)["onVnodeBeforeUpdate"];
	"onVnodeUpdated"?: (AsamTreeV2Props)["onVnodeUpdated"];
	"onVnodeBeforeUnmount"?: (AsamTreeV2Props)["onVnodeBeforeUnmount"];
	"onVnodeUnmounted"?: (AsamTreeV2Props)["onVnodeUnmounted"];
	"class"?: unknown;
	"style"?: unknown;
};

完整的上游实例，包含全部公开方法与响应式状态。

参数与事件说明

`$`

必填：是；声明来源：依赖声明。

$ 参数与事件数据

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

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

`$data`

必填：是；声明来源：依赖声明。

`$props`

必填：是；声明来源：依赖声明。

$props 参数与事件数据

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

嵌套展开边界：复杂类型；完整类型见公开类型视图。

`$attrs`

必填：是；声明来源：依赖声明。

$attrs 参数与事件数据

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

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

`$refs`

必填：是；声明来源：依赖声明。

$refs 参数与事件数据

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

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

`$slots`

必填：是；声明来源：依赖声明。

`$root`

必填：是；声明来源：依赖声明。

`$parent`

必填：是；声明来源：依赖声明。

`$host`

必填：是；声明来源：依赖声明。

$host 参数与事件数据

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

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`$emit`

必填：是；声明来源：依赖声明。

$emit 参数与事件数据

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

事件参数：(event: "current-change", ...args: [data: AsamTreeNodeData, node: AsamTreeV2Node]): void

事件参数：(event: "check-change", ...args: [data: AsamTreeNodeData, checked: boolean]): void

事件参数：(event: "node-click", ...args: [data: AsamTreeNodeData, node: AsamTreeV2Node, e: MouseEvent]): void

事件参数：(event: "node-contextmenu", ...args: [evt: globalThis.Event, data: AsamTreeNodeData, node: AsamTreeV2Node]): void

事件参数：(event: "node-collapse", ...args: [data: AsamTreeNodeData, node: AsamTreeV2Node]): void

事件参数：(event: "node-expand", ...args: [data: AsamTreeNodeData, node: AsamTreeV2Node]): void

事件参数完整签名见公开类型视图：(AsamTreeV2Expose)["$emit"]。

事件参数：(event: "node-drop", ...args: [data: AsamTreeNodeData, node: AsamTreeV2Node, e: DragEvent]): void

`$el`

必填：是；声明来源：依赖声明。

`$options`

必填：是；声明来源：依赖声明。

$options 参数与事件数据

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

嵌套展开边界：复杂类型；完整类型见公开类型视图。

`$forceUpdate`

必填：是；声明来源：依赖声明。

$forceUpdate 参数与事件数据

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

事件参数：(): void

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

`$nextTick`

必填：是；声明来源：依赖声明。

$nextTick 参数与事件数据

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

事件参数：(): Promise<void>

事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>

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

`$watch`

必填：是；声明来源：依赖声明。

$watch 参数与事件数据

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

事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamTreeV2Expose)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

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

`props`

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

props 参数与事件数据

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

props.children: string | undefined — 上游声明
指定子树为节点对象的某个属性值
固定上游文档默认：children（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.label: string | undefined — 上游声明
指定节点标签为节点对象的某个属性值
固定上游文档默认：label（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.value: string | undefined — 上游声明
每个树节点用来作为唯一标识的属性，在整棵树中应该是唯一的
固定上游文档默认：id（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.disabled: string | undefined — 上游声明
指定节点选择框是否禁用为节点对象的某个属性值
固定上游文档默认：disabled（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.class: string | ((data: AsamTreeV2NodeData, node: AsamTreeV2Node) => string | { [key: string]: boolean; }) | undefined — 上游声明
自定义节点类名
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
事件参数：(data: AsamTreeV2NodeData, node: AsamTreeV2Node): string | { [key: string]: boolean; }

`data`

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

`defaultCheckedKeys`

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

defaultCheckedKeys 参数与事件数据

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

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

`defaultExpandedKeys`

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

defaultExpandedKeys 参数与事件数据

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

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

`height`

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

`perfMode`

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

perfMode 参数与事件数据

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

枚举：false / true

`itemSize`

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

`checkOnClickLeaf`

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

checkOnClickLeaf 参数与事件数据

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

枚举：false / true

`indent`

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

`expandOnClickNode`

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

expandOnClickNode 参数与事件数据

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

枚举：false / true

`emptyText`

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

`scrollbarAlwaysOn`

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

scrollbarAlwaysOn 参数与事件数据

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

枚举：false / true

`onCurrent-change`

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

onCurrent-change 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node): any

`icon`

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

icon 参数与事件数据

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

事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamTreeV2Expose)["icon"]>, (...args: never[]) => unknown>>[1]): any

icon.__isFragment: undefined — 依赖声明
icon.__isTeleport: undefined — 依赖声明
icon.__isSuspense: undefined — 依赖声明

`accordion`

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

accordion 参数与事件数据

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

枚举：false / true

`filterMethod`

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

filterMethod 参数与事件数据

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

事件参数：(query: string, data: AsamTreeV2NodeData, node: AsamTreeV2Node): boolean

`checkStrictly`

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

checkStrictly 参数与事件数据

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

枚举：false / true

`checkOnClickNode`

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

checkOnClickNode 参数与事件数据

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

枚举：false / true

`currentNodeKey`

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

`showCheckbox`

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

showCheckbox 参数与事件数据

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

枚举：false / true

`highlightCurrent`

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

highlightCurrent 参数与事件数据

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

枚举：false / true

`onCheck-change`

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

onCheck-change 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, checked: boolean): any

`onNode-click`

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

onNode-click 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node, e: MouseEvent): any

`onNode-contextmenu`

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

onNode-contextmenu 参数与事件数据

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

事件参数：(evt: Event, data: AsamTreeNodeData, node: AsamTreeV2Node): any

`onNode-collapse`

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

onNode-collapse 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node): any

`onNode-expand`

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

onNode-expand 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node): any

`onCheck`

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

onCheck 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, checkedInfo: Parameters<Extract<NonNullable<(AsamTreeV2Expose)["onCheck"]>, (...args: never[]) => unknown>>[1]): any

`onNode-drop`

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

onNode-drop 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node, e: DragEvent): any

`toggleCheckbox`

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

toggleCheckbox 参数与事件数据

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

事件参数：(node: AsamTreeV2Node, isChecked: Parameters<Extract<NonNullable<(AsamTreeV2Expose)["toggleCheckbox"]>, (...args: never[]) => unknown>>[1], nodeClick?: boolean | undefined, immediateUpdate?: boolean | undefined, deep?: boolean | undefined): void

`getCurrentNode`

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

getCurrentNode 参数与事件数据

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

事件参数：(): AsamTreeV2NodeData | undefined

`getCurrentKey`

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

getCurrentKey 参数与事件数据

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

事件参数：(): AsamTreeV2Node["key"] | undefined

`setCurrentKey`

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

setCurrentKey 参数与事件数据

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

事件参数：(key: AsamTreeV2Node["key"]): void

`getCheckedKeys`

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

getCheckedKeys 参数与事件数据

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

事件参数：(leafOnly?: boolean | undefined): AsamTreeV2Node["key"][]

`getCheckedNodes`

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

getCheckedNodes 参数与事件数据

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

事件参数：(leafOnly?: boolean | undefined): AsamTreeV2NodeData[]

`getHalfCheckedKeys`

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

getHalfCheckedKeys 参数与事件数据

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

事件参数：(): AsamTreeV2Node["key"][]

`getHalfCheckedNodes`

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

getHalfCheckedNodes 参数与事件数据

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

事件参数：(): AsamTreeV2NodeData[]

`setChecked`

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

setChecked 参数与事件数据

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

事件参数：(key: AsamTreeV2Node["key"], isChecked: boolean, deep?: boolean | undefined): void

`setCheckedKeys`

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

setCheckedKeys 参数与事件数据

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

事件参数：(keys: AsamTreeV2Node["key"][]): void

`filter`

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

filter 参数与事件数据

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

事件参数：(query: string): void

`setData`

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

setData 参数与事件数据

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

事件参数：(data: AsamTreeV2Expose["data"]): void

`getNode`

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

getNode 参数与事件数据

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

事件参数：(data: AsamTreeV2NodeData | AsamTreeV2Node["key"]): AsamTreeV2Node | undefined

`expandNode`

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

expandNode 参数与事件数据

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

事件参数：(node: AsamTreeV2Node): void

`collapseNode`

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

collapseNode 参数与事件数据

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

事件参数：(node: AsamTreeV2Node): void

`setExpandedKeys`

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

setExpandedKeys 参数与事件数据

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

事件参数：(keys: AsamTreeV2Node["key"][]): void

`scrollToNode`

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

scrollToNode 参数与事件数据

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

事件参数：(key: AsamTreeV2Node["key"], strategy?: AsamDynamicSizeGridAlignment | undefined): void

`scrollTo`

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

scrollTo 参数与事件数据

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

事件参数：(offset: number): void

`$route`

必填：是；声明来源：依赖声明。

$route 参数与事件数据

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

$route.matched: (NonNullable<AsamTreeV2Expose["$route"]>)["matched"] — 依赖声明
仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name: (NonNullable<AsamTreeV2Expose["$route"]>)["name"] — 依赖声明
匹配路由记录的名称。
$route.fullPath: string — 依赖声明
包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query: (NonNullable<AsamTreeV2Expose["$route"]>)["query"] — 依赖声明
当前位置 search 属性的对象表示。
$route.hash: string — 依赖声明
当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom: (NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"] — 依赖声明
最终到达当前位置之前，最初尝试访问的位置。
- $route.redirectedFrom.matched: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "matched"> — 依赖声明
  包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $route.redirectedFrom.fullPath: string — 依赖声明
  包含 search 和 hash 的完整位置字符串，使用百分号编码。
- $route.redirectedFrom.query: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "query"> — 依赖声明
  当前位置 search 属性的对象表示。
- $route.redirectedFrom.hash: string — 依赖声明
  当前位置的哈希片段；存在时以 # 开头。
- $route.redirectedFrom.redirectedFrom: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "redirectedFrom"> — 依赖声明
  最终到达当前位置之前，最初尝试访问的位置。
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- $route.redirectedFrom.name: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "name"> — 依赖声明
  匹配路由记录的名称。
- $route.redirectedFrom.meta: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "meta"> — 依赖声明
  全部匹配路由记录合并后的 meta 属性。
- $route.redirectedFrom.params: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "params"> — 依赖声明
  从 path 提取并解码后的参数对象。
- $route.redirectedFrom.path: string — 依赖声明
  URL 中经过百分号编码的路径部分。
- $route.redirectedFrom.replace: boolean | undefined — 依赖声明
  替换当前历史记录，而不是添加新记录。
  枚举：false / true
- $route.redirectedFrom.force: boolean | undefined — 依赖声明
  即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
  枚举：false / true
- $route.redirectedFrom.state: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "state"> — 依赖声明
  通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta: (NonNullable<AsamTreeV2Expose["$route"]>)["meta"] — 依赖声明
全部匹配路由记录合并后的 meta 属性。
$route.params: (NonNullable<AsamTreeV2Expose["$route"]>)["params"] — 依赖声明
从 path 提取并解码后的参数对象。
$route.path: string — 依赖声明
URL 中经过百分号编码的路径部分。

`$router`

必填：是；声明来源：依赖声明。

$router 参数与事件数据

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

$router.options: (NonNullable<AsamTreeV2Expose["$router"]>)["options"] — 依赖声明
创建路由器时传入的原始配置对象。
- $router.options.routes: (NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["routes"] — 依赖声明
  需要添加到路由器的初始路由列表。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $router.options.history: (NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"] — 依赖声明
  路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
  - $router.options.history.base: string — 依赖声明
    添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.location: string — 依赖声明
    当前历史记录位置。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.state: (NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["state"] — 依赖声明
    当前历史记录状态。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.push: (NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["push"] — 依赖声明
    导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.replace: (NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["replace"] — 依赖声明
    与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.go: (delta: number, triggerListeners?: boolean) => void — 依赖声明
    按指定方向遍历历史记录。
    事件参数：(delta: number, triggerListeners?: boolean | undefined): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.listen: (NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["listen"] — 依赖声明
    为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
    事件参数：(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.createHref: (NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["createHref"] — 依赖声明
    生成用于链接元素的对应 href。
    事件参数：(location: string): string
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.destroy: () => void — 依赖声明
    清除历史记录实现注册的全部事件监听器。
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- $router.options.scrollBehavior: (NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["scrollBehavior"] — 依赖声明
  控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
  事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamTreeV2Expose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>
- $router.options.parseQuery: (NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["parseQuery"] — 依赖声明
  自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
  事件参数：(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>
- $router.options.stringifyQuery: (NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["stringifyQuery"] — 依赖声明
  自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
  事件参数：(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string
- $router.options.linkActiveClass: string | undefined — 依赖声明
  应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
- $router.options.linkExactActiveClass: string | undefined — 依赖声明
  应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
- $router.options.end: boolean | undefined — 依赖声明
  是否在表达式末尾添加 $，使其匹配到路径结尾。
  声明默认：`true`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.sensitive: boolean | undefined — 依赖声明
  使正则表达式区分大小写。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.strict: boolean | undefined — 依赖声明
  是否禁止路径末尾的斜杠。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
$router.addRoute: (NonNullable<AsamTreeV2Expose["$router"]>)["addRoute"] — 依赖声明
向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute: (NonNullable<AsamTreeV2Expose["$router"]>)["removeRoute"] — 依赖声明
按名称移除已有路由。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void
$router.clearRoutes: () => void — 依赖声明
从路由器中删除全部路由。
事件参数：(): void
$router.currentRoute: ShallowRef<AsamTreeV2Expose["$route"]> — 依赖声明
当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening: boolean — 依赖声明
允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：false / true
$router.hasRoute: (NonNullable<AsamTreeV2Expose["$router"]>)["hasRoute"] — 依赖声明
检查指定名称的路由是否存在。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean
$router.getRoutes: (NonNullable<AsamTreeV2Expose["$router"]>)["getRoutes"] — 依赖声明
获取全部 RouteRecord 路由记录的完整列表。
事件参数：(): ReturnType<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>
$router.resolve: (NonNullable<AsamTreeV2Expose["$router"]>)["resolve"] — 依赖声明
返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push: (NonNullable<AsamTreeV2Expose["$router"]>)["push"] — 依赖声明
通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["push"]>, (...args: never[]) => unknown>>
$router.replace: (NonNullable<AsamTreeV2Expose["$router"]>)["replace"] — 依赖声明
通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["replace"]>, (...args: never[]) => unknown>>
$router.back: () => void — 依赖声明
通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：(): void
$router.forward: () => void — 依赖声明
通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：(): void
$router.go: (delta: number) => void — 依赖声明
通过调用 history.go() 在历史记录中前进或后退。
事件参数：(delta: number): void
$router.beforeEach: (NonNullable<AsamTreeV2Expose["$router"]>)["beforeEach"] — 依赖声明
添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.beforeResolve: (NonNullable<AsamTreeV2Expose["$router"]>)["beforeResolve"] — 依赖声明
添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void
$router.afterEach: (NonNullable<AsamTreeV2Expose["$router"]>)["afterEach"] — 依赖声明
添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.onError: (NonNullable<AsamTreeV2Expose["$router"]>)["onError"] — 依赖声明
添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：(handler: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void
$router.isReady: () => Promise<void> — 依赖声明
返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：(): Promise<void>
$router.install: (app: App) => void — 依赖声明
由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：(app: App<any>): void

AsamTreeV2Expose 公开类型视图

import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamTreeV2Expose, AsamTableColumnExpose, AsamTreeV2Props, AsamTreeNodeData, AsamTreeV2Node, AsamTreeV2NodeData, AsamDynamicSizeGridAlignment } from '@asam-ui/ui';

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

// AsamTreeV2Expose
type PublicContract = {
	"$": AsamTreeV2Expose["$"];
	"$data": AsamTableColumnExpose;
	"$props": AsamTreeV2Props;
	"$attrs": AsamTreeV2Expose["$attrs"];
	"$refs": AsamTreeV2Expose["$refs"];
	"$slots": (AsamTreeV2Expose)["$slots"];
	"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$host": Element | null;
	"$emit": (AsamTreeV2Expose)["$emit"];
	"$el": any;
	"$options": (AsamTreeV2Expose)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamTreeV2Expose)["$nextTick"];
	"$watch": (AsamTreeV2Expose)["$watch"];
	readonly "props": AsamTreeV2Expose["props"];
	readonly "data": AsamTreeV2Expose["data"];
	readonly "defaultCheckedKeys": AsamTreeV2Node["key"][];
	readonly "defaultExpandedKeys": AsamTreeV2Node["key"][];
	readonly "height": number;
	readonly "perfMode": boolean;
	readonly "itemSize": number;
	readonly "checkOnClickLeaf": boolean;
	readonly "indent": number;
	readonly "expandOnClickNode": boolean;
	readonly "emptyText"?: string | undefined;
	readonly "scrollbarAlwaysOn"?: boolean | undefined;
	readonly "onCurrent-change"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) | undefined;
	readonly "icon"?: (AsamTreeV2Expose)["icon"];
	readonly "accordion"?: boolean | undefined;
	readonly "filterMethod"?: (AsamTreeV2Expose)["filterMethod"];
	readonly "checkStrictly"?: boolean | undefined;
	readonly "checkOnClickNode"?: boolean | undefined;
	readonly "currentNodeKey"?: string | number | undefined;
	readonly "showCheckbox"?: boolean | undefined;
	readonly "highlightCurrent"?: boolean | undefined;
	readonly "onCheck-change"?: ((data: AsamTreeNodeData, checked: boolean) => any) | undefined;
	readonly "onNode-click"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node, e: MouseEvent) => any) | undefined;
	readonly "onNode-contextmenu"?: ((evt: Event, data: AsamTreeNodeData, node: AsamTreeV2Node) => any) | undefined;
	readonly "onNode-collapse"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) | undefined;
	readonly "onNode-expand"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) | undefined;
	readonly "onCheck"?: (AsamTreeV2Expose)["onCheck"];
	readonly "onNode-drop"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node, e: DragEvent) => any) | undefined;
	"toggleCheckbox": (AsamTreeV2Expose)["toggleCheckbox"];
	"getCurrentNode": () => AsamTreeV2NodeData | undefined;
	"getCurrentKey": () => AsamTreeV2Node["key"] | undefined;
	"setCurrentKey": (key: AsamTreeV2Node["key"]) => void;
	"getCheckedKeys": (leafOnly?: boolean) => AsamTreeV2Node["key"][];
	"getCheckedNodes": (leafOnly?: boolean) => AsamTreeV2NodeData[];
	"getHalfCheckedKeys": () => AsamTreeV2Node["key"][];
	"getHalfCheckedNodes": () => AsamTreeV2NodeData[];
	"setChecked": (key: AsamTreeV2Node["key"], isChecked: boolean, deep?: boolean) => void;
	"setCheckedKeys": (keys: AsamTreeV2Node["key"][]) => void;
	"filter": (query: string) => void;
	"setData": (data: AsamTreeV2Expose["data"]) => void;
	"getNode": (data: AsamTreeV2Node["key"] | AsamTreeV2NodeData) => AsamTreeV2Node | undefined;
	"expandNode": (node: AsamTreeV2Node) => void;
	"collapseNode": (node: AsamTreeV2Node) => void;
	"setExpandedKeys": (keys: AsamTreeV2Node["key"][]) => void;
	"scrollToNode": (key: AsamTreeV2Node["key"], strategy?: AsamDynamicSizeGridAlignment) => void;
	"scrollTo": (offset: number) => void;
	"$route": AsamTreeV2Expose["$route"];
	"$router": AsamTreeV2Expose["$router"];
};

参数与事件说明

`$`

必填：是；声明来源：依赖声明。

$ 参数与事件数据

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

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

`$data`

必填：是；声明来源：依赖声明。

`$props`

必填：是；声明来源：依赖声明。

$props 参数与事件数据

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

嵌套展开边界：复杂类型；完整类型见公开类型视图。

`$attrs`

必填：是；声明来源：依赖声明。

$attrs 参数与事件数据

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

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

`$refs`

必填：是；声明来源：依赖声明。

$refs 参数与事件数据

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

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

`$slots`

必填：是；声明来源：依赖声明。

`$root`

必填：是；声明来源：依赖声明。

`$parent`

必填：是；声明来源：依赖声明。

`$host`

必填：是；声明来源：依赖声明。

$host 参数与事件数据

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

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`$emit`

必填：是；声明来源：依赖声明。

$emit 参数与事件数据

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

事件参数：(event: "current-change", ...args: [data: AsamTreeNodeData, node: AsamTreeV2Node]): void

事件参数：(event: "check-change", ...args: [data: AsamTreeNodeData, checked: boolean]): void

事件参数：(event: "node-click", ...args: [data: AsamTreeNodeData, node: AsamTreeV2Node, e: MouseEvent]): void

事件参数：(event: "node-contextmenu", ...args: [evt: globalThis.Event, data: AsamTreeNodeData, node: AsamTreeV2Node]): void

事件参数：(event: "node-collapse", ...args: [data: AsamTreeNodeData, node: AsamTreeV2Node]): void

事件参数：(event: "node-expand", ...args: [data: AsamTreeNodeData, node: AsamTreeV2Node]): void

事件参数完整签名见公开类型视图：(AsamTreeV2Instance)["$emit"]。

事件参数：(event: "node-drop", ...args: [data: AsamTreeNodeData, node: AsamTreeV2Node, e: DragEvent]): void

`$el`

必填：是；声明来源：依赖声明。

`$options`

必填：是；声明来源：依赖声明。

$options 参数与事件数据

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

嵌套展开边界：复杂类型；完整类型见公开类型视图。

`$forceUpdate`

必填：是；声明来源：依赖声明。

$forceUpdate 参数与事件数据

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

事件参数：(): void

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

`$nextTick`

必填：是；声明来源：依赖声明。

$nextTick 参数与事件数据

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

事件参数：(): Promise<void>

事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>

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

`$watch`

必填：是；声明来源：依赖声明。

$watch 参数与事件数据

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

事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamTreeV2Instance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

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

`props`

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

props 参数与事件数据

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

props.children: string | undefined — 上游声明
指定子树为节点对象的某个属性值
固定上游文档默认：children（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.label: string | undefined — 上游声明
指定节点标签为节点对象的某个属性值
固定上游文档默认：label（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.value: string | undefined — 上游声明
每个树节点用来作为唯一标识的属性，在整棵树中应该是唯一的
固定上游文档默认：id（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.disabled: string | undefined — 上游声明
指定节点选择框是否禁用为节点对象的某个属性值
固定上游文档默认：disabled（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.class: string | ((data: AsamTreeV2NodeData, node: AsamTreeV2Node) => string | { [key: string]: boolean; }) | undefined — 上游声明
自定义节点类名
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
事件参数：(data: AsamTreeV2NodeData, node: AsamTreeV2Node): string | { [key: string]: boolean; }

`data`

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

`defaultCheckedKeys`

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

defaultCheckedKeys 参数与事件数据

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

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

`defaultExpandedKeys`

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

defaultExpandedKeys 参数与事件数据

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

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

`height`

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

`perfMode`

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

perfMode 参数与事件数据

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

枚举：false / true

`itemSize`

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

`checkOnClickLeaf`

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

checkOnClickLeaf 参数与事件数据

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

枚举：false / true

`indent`

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

`expandOnClickNode`

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

expandOnClickNode 参数与事件数据

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

枚举：false / true

`emptyText`

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

`scrollbarAlwaysOn`

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

scrollbarAlwaysOn 参数与事件数据

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

枚举：false / true

`onCurrent-change`

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

onCurrent-change 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node): any

`icon`

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

icon 参数与事件数据

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

事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamTreeV2Instance)["icon"]>, (...args: never[]) => unknown>>[1]): any

icon.__isFragment: undefined — 依赖声明
icon.__isTeleport: undefined — 依赖声明
icon.__isSuspense: undefined — 依赖声明

`accordion`

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

accordion 参数与事件数据

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

枚举：false / true

`filterMethod`

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

filterMethod 参数与事件数据

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

事件参数：(query: string, data: AsamTreeV2NodeData, node: AsamTreeV2Node): boolean

`checkStrictly`

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

checkStrictly 参数与事件数据

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

枚举：false / true

`checkOnClickNode`

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

checkOnClickNode 参数与事件数据

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

枚举：false / true

`currentNodeKey`

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

`showCheckbox`

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

showCheckbox 参数与事件数据

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

枚举：false / true

`highlightCurrent`

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

highlightCurrent 参数与事件数据

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

枚举：false / true

`onCheck-change`

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

onCheck-change 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, checked: boolean): any

`onNode-click`

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

onNode-click 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node, e: MouseEvent): any

`onNode-contextmenu`

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

onNode-contextmenu 参数与事件数据

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

事件参数：(evt: Event, data: AsamTreeNodeData, node: AsamTreeV2Node): any

`onNode-collapse`

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

onNode-collapse 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node): any

`onNode-expand`

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

onNode-expand 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node): any

`onCheck`

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

onCheck 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, checkedInfo: Parameters<Extract<NonNullable<(AsamTreeV2Instance)["onCheck"]>, (...args: never[]) => unknown>>[1]): any

`onNode-drop`

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

onNode-drop 参数与事件数据

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

事件参数：(data: AsamTreeNodeData, node: AsamTreeV2Node, e: DragEvent): any

`toggleCheckbox`

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

toggleCheckbox 参数与事件数据

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

事件参数：(node: AsamTreeV2Node, isChecked: Parameters<Extract<NonNullable<(AsamTreeV2Instance)["toggleCheckbox"]>, (...args: never[]) => unknown>>[1], nodeClick?: boolean | undefined, immediateUpdate?: boolean | undefined, deep?: boolean | undefined): void

`getCurrentNode`

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

getCurrentNode 参数与事件数据

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

事件参数：(): AsamTreeV2NodeData | undefined

`getCurrentKey`

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

getCurrentKey 参数与事件数据

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

事件参数：(): AsamTreeV2Node["key"] | undefined

`setCurrentKey`

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

setCurrentKey 参数与事件数据

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

事件参数：(key: AsamTreeV2Node["key"]): void

`getCheckedKeys`

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

getCheckedKeys 参数与事件数据

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

事件参数：(leafOnly?: boolean | undefined): AsamTreeV2Node["key"][]

`getCheckedNodes`

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

getCheckedNodes 参数与事件数据

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

事件参数：(leafOnly?: boolean | undefined): AsamTreeV2NodeData[]

`getHalfCheckedKeys`

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

getHalfCheckedKeys 参数与事件数据

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

事件参数：(): AsamTreeV2Node["key"][]

`getHalfCheckedNodes`

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

getHalfCheckedNodes 参数与事件数据

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

事件参数：(): AsamTreeV2NodeData[]

`setChecked`

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

setChecked 参数与事件数据

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

事件参数：(key: AsamTreeV2Node["key"], isChecked: boolean, deep?: boolean | undefined): void

`setCheckedKeys`

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

setCheckedKeys 参数与事件数据

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

事件参数：(keys: AsamTreeV2Node["key"][]): void

`filter`

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

filter 参数与事件数据

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

事件参数：(query: string): void

`setData`

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

setData 参数与事件数据

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

事件参数：(data: AsamTreeV2Expose["data"]): void

`getNode`

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

getNode 参数与事件数据

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

事件参数：(data: AsamTreeV2NodeData | AsamTreeV2Node["key"]): AsamTreeV2Node | undefined

`expandNode`

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

expandNode 参数与事件数据

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

事件参数：(node: AsamTreeV2Node): void

`collapseNode`

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

collapseNode 参数与事件数据

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

事件参数：(node: AsamTreeV2Node): void

`setExpandedKeys`

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

setExpandedKeys 参数与事件数据

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

事件参数：(keys: AsamTreeV2Node["key"][]): void

`scrollToNode`

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

scrollToNode 参数与事件数据

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

事件参数：(key: AsamTreeV2Node["key"], strategy?: AsamDynamicSizeGridAlignment | undefined): void

`scrollTo`

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

scrollTo 参数与事件数据

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

事件参数：(offset: number): void

`$route`

必填：是；声明来源：依赖声明。

$route 参数与事件数据

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

$route.matched: (NonNullable<AsamTreeV2Expose["$route"]>)["matched"] — 依赖声明
仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name: (NonNullable<AsamTreeV2Expose["$route"]>)["name"] — 依赖声明
匹配路由记录的名称。
$route.fullPath: string — 依赖声明
包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query: (NonNullable<AsamTreeV2Expose["$route"]>)["query"] — 依赖声明
当前位置 search 属性的对象表示。
$route.hash: string — 依赖声明
当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom: (NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"] — 依赖声明
最终到达当前位置之前，最初尝试访问的位置。
- $route.redirectedFrom.matched: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "matched"> — 依赖声明
  包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $route.redirectedFrom.fullPath: string — 依赖声明
  包含 search 和 hash 的完整位置字符串，使用百分号编码。
- $route.redirectedFrom.query: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "query"> — 依赖声明
  当前位置 search 属性的对象表示。
- $route.redirectedFrom.hash: string — 依赖声明
  当前位置的哈希片段；存在时以 # 开头。
- $route.redirectedFrom.redirectedFrom: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "redirectedFrom"> — 依赖声明
  最终到达当前位置之前，最初尝试访问的位置。
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- $route.redirectedFrom.name: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "name"> — 依赖声明
  匹配路由记录的名称。
- $route.redirectedFrom.meta: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "meta"> — 依赖声明
  全部匹配路由记录合并后的 meta 属性。
- $route.redirectedFrom.params: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "params"> — 依赖声明
  从 path 提取并解码后的参数对象。
- $route.redirectedFrom.path: string — 依赖声明
  URL 中经过百分号编码的路径部分。
- $route.redirectedFrom.replace: boolean | undefined — 依赖声明
  替换当前历史记录，而不是添加新记录。
  枚举：false / true
- $route.redirectedFrom.force: boolean | undefined — 依赖声明
  即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
  枚举：false / true
- $route.redirectedFrom.state: PublicMember<NonNullable<(NonNullable<AsamTreeV2Expose["$route"]>)["redirectedFrom"]>, "state"> — 依赖声明
  通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta: (NonNullable<AsamTreeV2Expose["$route"]>)["meta"] — 依赖声明
全部匹配路由记录合并后的 meta 属性。
$route.params: (NonNullable<AsamTreeV2Expose["$route"]>)["params"] — 依赖声明
从 path 提取并解码后的参数对象。
$route.path: string — 依赖声明
URL 中经过百分号编码的路径部分。

`$router`

必填：是；声明来源：依赖声明。

$router 参数与事件数据

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

$router.options: (NonNullable<AsamTreeV2Expose["$router"]>)["options"] — 依赖声明
创建路由器时传入的原始配置对象。
- $router.options.routes: (NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["routes"] — 依赖声明
  需要添加到路由器的初始路由列表。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $router.options.history: (NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"] — 依赖声明
  路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
  - $router.options.history.base: string — 依赖声明
    添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.location: string — 依赖声明
    当前历史记录位置。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.state: (NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["state"] — 依赖声明
    当前历史记录状态。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.push: (NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["push"] — 依赖声明
    导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.replace: (NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["replace"] — 依赖声明
    与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.go: (delta: number, triggerListeners?: boolean) => void — 依赖声明
    按指定方向遍历历史记录。
    事件参数：(delta: number, triggerListeners?: boolean | undefined): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.listen: (NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["listen"] — 依赖声明
    为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
    事件参数：(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.createHref: (NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["history"]>)["createHref"] — 依赖声明
    生成用于链接元素的对应 href。
    事件参数：(location: string): string
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.destroy: () => void — 依赖声明
    清除历史记录实现注册的全部事件监听器。
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- $router.options.scrollBehavior: (NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["scrollBehavior"] — 依赖声明
  控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
  事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamTreeV2Expose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>
- $router.options.parseQuery: (NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["parseQuery"] — 依赖声明
  自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
  事件参数：(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>
- $router.options.stringifyQuery: (NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["stringifyQuery"] — 依赖声明
  自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
  事件参数：(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string
- $router.options.linkActiveClass: string | undefined — 依赖声明
  应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
- $router.options.linkExactActiveClass: string | undefined — 依赖声明
  应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
- $router.options.end: boolean | undefined — 依赖声明
  是否在表达式末尾添加 $，使其匹配到路径结尾。
  声明默认：`true`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.sensitive: boolean | undefined — 依赖声明
  使正则表达式区分大小写。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.strict: boolean | undefined — 依赖声明
  是否禁止路径末尾的斜杠。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
$router.addRoute: (NonNullable<AsamTreeV2Expose["$router"]>)["addRoute"] — 依赖声明
向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute: (NonNullable<AsamTreeV2Expose["$router"]>)["removeRoute"] — 依赖声明
按名称移除已有路由。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void
$router.clearRoutes: () => void — 依赖声明
从路由器中删除全部路由。
事件参数：(): void
$router.currentRoute: ShallowRef<AsamTreeV2Expose["$route"]> — 依赖声明
当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening: boolean — 依赖声明
允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：false / true
$router.hasRoute: (NonNullable<AsamTreeV2Expose["$router"]>)["hasRoute"] — 依赖声明
检查指定名称的路由是否存在。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean
$router.getRoutes: (NonNullable<AsamTreeV2Expose["$router"]>)["getRoutes"] — 依赖声明
获取全部 RouteRecord 路由记录的完整列表。
事件参数：(): ReturnType<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>
$router.resolve: (NonNullable<AsamTreeV2Expose["$router"]>)["resolve"] — 依赖声明
返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push: (NonNullable<AsamTreeV2Expose["$router"]>)["push"] — 依赖声明
通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["push"]>, (...args: never[]) => unknown>>
$router.replace: (NonNullable<AsamTreeV2Expose["$router"]>)["replace"] — 依赖声明
通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["replace"]>, (...args: never[]) => unknown>>
$router.back: () => void — 依赖声明
通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：(): void
$router.forward: () => void — 依赖声明
通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：(): void
$router.go: (delta: number) => void — 依赖声明
通过调用 history.go() 在历史记录中前进或后退。
事件参数：(delta: number): void
$router.beforeEach: (NonNullable<AsamTreeV2Expose["$router"]>)["beforeEach"] — 依赖声明
添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.beforeResolve: (NonNullable<AsamTreeV2Expose["$router"]>)["beforeResolve"] — 依赖声明
添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void
$router.afterEach: (NonNullable<AsamTreeV2Expose["$router"]>)["afterEach"] — 依赖声明
添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.onError: (NonNullable<AsamTreeV2Expose["$router"]>)["onError"] — 依赖声明
添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：(handler: Parameters<Extract<NonNullable<(NonNullable<AsamTreeV2Expose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void
$router.isReady: () => Promise<void> — 依赖声明
返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：(): Promise<void>
$router.install: (app: App) => void — 依赖声明
由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：(app: App<any>): void

AsamTreeV2Instance 公开类型视图

import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamTreeV2Instance, AsamTreeV2Expose, AsamTableColumnExpose, AsamTreeV2Props, AsamTreeNodeData, AsamTreeV2Node, AsamTreeV2NodeData, AsamDynamicSizeGridAlignment } from '@asam-ui/ui';

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

// AsamTreeV2Instance
type PublicContract = {
	"$": AsamTreeV2Expose["$"];
	"$data": AsamTableColumnExpose;
	"$props": AsamTreeV2Props;
	"$attrs": AsamTreeV2Expose["$attrs"];
	"$refs": AsamTreeV2Expose["$refs"];
	"$slots": (AsamTreeV2Instance)["$slots"];
	"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$host": Element | null;
	"$emit": (AsamTreeV2Instance)["$emit"];
	"$el": any;
	"$options": (AsamTreeV2Instance)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamTreeV2Instance)["$nextTick"];
	"$watch": (AsamTreeV2Instance)["$watch"];
	readonly "props": AsamTreeV2Expose["props"];
	readonly "data": AsamTreeV2Expose["data"];
	readonly "defaultCheckedKeys": AsamTreeV2Node["key"][];
	readonly "defaultExpandedKeys": AsamTreeV2Node["key"][];
	readonly "height": number;
	readonly "perfMode": boolean;
	readonly "itemSize": number;
	readonly "checkOnClickLeaf": boolean;
	readonly "indent": number;
	readonly "expandOnClickNode": boolean;
	readonly "emptyText"?: string | undefined;
	readonly "scrollbarAlwaysOn"?: boolean | undefined;
	readonly "onCurrent-change"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) | undefined;
	readonly "icon"?: (AsamTreeV2Instance)["icon"];
	readonly "accordion"?: boolean | undefined;
	readonly "filterMethod"?: (AsamTreeV2Instance)["filterMethod"];
	readonly "checkStrictly"?: boolean | undefined;
	readonly "checkOnClickNode"?: boolean | undefined;
	readonly "currentNodeKey"?: string | number | undefined;
	readonly "showCheckbox"?: boolean | undefined;
	readonly "highlightCurrent"?: boolean | undefined;
	readonly "onCheck-change"?: ((data: AsamTreeNodeData, checked: boolean) => any) | undefined;
	readonly "onNode-click"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node, e: MouseEvent) => any) | undefined;
	readonly "onNode-contextmenu"?: ((evt: Event, data: AsamTreeNodeData, node: AsamTreeV2Node) => any) | undefined;
	readonly "onNode-collapse"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) | undefined;
	readonly "onNode-expand"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node) => any) | undefined;
	readonly "onCheck"?: (AsamTreeV2Instance)["onCheck"];
	readonly "onNode-drop"?: ((data: AsamTreeNodeData, node: AsamTreeV2Node, e: DragEvent) => any) | undefined;
	"toggleCheckbox": (AsamTreeV2Instance)["toggleCheckbox"];
	"getCurrentNode": () => AsamTreeV2NodeData | undefined;
	"getCurrentKey": () => AsamTreeV2Node["key"] | undefined;
	"setCurrentKey": (key: AsamTreeV2Node["key"]) => void;
	"getCheckedKeys": (leafOnly?: boolean) => AsamTreeV2Node["key"][];
	"getCheckedNodes": (leafOnly?: boolean) => AsamTreeV2NodeData[];
	"getHalfCheckedKeys": () => AsamTreeV2Node["key"][];
	"getHalfCheckedNodes": () => AsamTreeV2NodeData[];
	"setChecked": (key: AsamTreeV2Node["key"], isChecked: boolean, deep?: boolean) => void;
	"setCheckedKeys": (keys: AsamTreeV2Node["key"][]) => void;
	"filter": (query: string) => void;
	"setData": (data: AsamTreeV2Expose["data"]) => void;
	"getNode": (data: AsamTreeV2Node["key"] | AsamTreeV2NodeData) => AsamTreeV2Node | undefined;
	"expandNode": (node: AsamTreeV2Node) => void;
	"collapseNode": (node: AsamTreeV2Node) => void;
	"setExpandedKeys": (keys: AsamTreeV2Node["key"][]) => void;
	"scrollToNode": (key: AsamTreeV2Node["key"], strategy?: AsamDynamicSizeGridAlignment) => void;
	"scrollTo": (offset: number) => void;
	"$route": AsamTreeV2Expose["$route"];
	"$router": AsamTreeV2Expose["$router"];
};

作用域插槽保留上游实例契约。

参数与事件说明

`default`

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

default 参数与事件数据

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

事件参数：(scope: { node: AsamTreeV2Node; data: AsamTreeV2NodeData; }): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[]

`empty`

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

empty 参数与事件数据

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

事件参数：(): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[]

AsamTreeV2Slots 公开类型视图

import type { VNode } from 'vue';
import type { AsamTreeV2Slots, AsamTreeV2Node, AsamTreeV2NodeData } from '@asam-ui/ui';

// AsamTreeV2Slots
type PublicContract = {
	"default"?: ((scope: { node: AsamTreeV2Node; data: AsamTreeV2NodeData; }) => VNode[]) | undefined;
	"empty"?: (() => VNode[]) | undefined;
};

参数与事件说明

`key`

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

`level`

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

`parent`

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

parent 参数与事件数据

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

parent.key: AsamTreeV2Node["key"] — 上游声明
parent.level: number — 上游声明
parent.parent: AsamTreeV2Node | undefined — 上游声明
嵌套展开边界：递归引用；完整类型见公开类型视图。
parent.children: AsamTreeV2Node[] | undefined — 上游声明
parent.data: AsamTreeV2NodeData — 上游声明
parent.disabled: boolean | undefined — 上游声明
枚举：false / true
parent.label: string | undefined — 上游声明
parent.isLeaf: boolean | undefined — 上游声明
枚举：false / true
parent.expanded: boolean | undefined — 上游声明
枚举：false / true
parent.isEffectivelyChecked: boolean | undefined — 上游声明
判断节点是否按原生规则有效选中：禁用叶节点视为选中，其他叶节点按实际状态判断；非叶节点要求所有子节点按同一规则有效选中。此处描述原生语义，不额外接管算法。
枚举：false / true

`children`

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

`data`

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

`disabled`

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

disabled 参数与事件数据

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

枚举：false / true

`label`

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

`isLeaf`

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

isLeaf 参数与事件数据

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

枚举：false / true

`expanded`

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

expanded 参数与事件数据

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

枚举：false / true

`isEffectivelyChecked`

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

isEffectivelyChecked 参数与事件数据

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

枚举：false / true

AsamTreeV2Node 公开类型视图

import type { AsamTreeV2Node, AsamTreeV2Expose, AsamTreeV2NodeData, AsamTreeV2Props } from '@asam-ui/ui';

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

// AsamTreeV2Node
type PublicContract = {
	"key": AsamTreeV2Node["key"];
	"level": number;
	"parent"?: AsamTreeV2Node | undefined;
	"children"?: AsamTreeV2Node[] | undefined;
	"data": AsamTreeV2NodeData;
	"disabled"?: boolean | undefined;
	"label"?: string | undefined;
	"isLeaf"?: boolean | undefined;
	"expanded"?: boolean | undefined;
	"isEffectivelyChecked"?: boolean | undefined;
};

AsamTreeV2NodeData 公开类型视图

import type { AsamTreeV2NodeData } from '@asam-ui/ui';

// AsamTreeV2NodeData
type PublicContract = {
	[key: string]: any;
};

虚拟树 AsamTreeV2

使用场景 ​

基础用法与状态 ​

基础用法与状态

使用约定 ​

原生协议完整用法与 API ​

基础用法 ​

基础用法

可选择的虚拟树 ​

可选择的虚拟树

禁用复选框 ​

禁用复选框

默认扩展和默认检查 ​

默认扩展和默认检查

自定义节点内容 ​

自定义节点内容

自定义节点类名 ​

自定义节点类名

自定义节点图标 ​

自定义节点图标

树节点过滤 ​

树节点过滤

TreeV2 API ​

属性 ​

节点字段映射 ​

实例方法与状态 ​

事件 ​

插槽 ​

API

属性 AsamTreeV2Props

实例方法与状态 AsamTreeV2Expose

类型 AsamTreeV2Instance

插槽 AsamTreeV2Slots

类型 AsamTreeV2Node

类型 AsamTreeV2NodeData

用法与契约补充说明 ​

使用约定 ​

关联组件

参数与事件说明

data

默认值与来源

emptyText

默认值与来源

height

默认值与来源

props

默认值与来源

highlightCurrent

默认值与来源

showCheckbox

默认值与来源

defaultCheckedKeys

默认值与来源

checkStrictly

默认值与来源

defaultExpandedKeys

默认值与来源

indent

默认值与来源

itemSize

默认值与来源

icon

默认值与来源

expandOnClickNode

默认值与来源

checkOnClickNode

默认值与来源

checkOnClickLeaf

默认值与来源

currentNodeKey

默认值与来源

accordion

默认值与来源

filterMethod

默认值与来源

perfMode

默认值与来源

scrollbarAlwaysOn

默认值与来源

onCheck-change

使用场景

基础用法与状态

使用约定

原生协议完整用法与 API

基础用法

可选择的虚拟树

禁用复选框

默认扩展和默认检查

自定义节点内容

自定义节点类名

自定义节点图标

树节点过滤

TreeV2 API

属性

节点字段映射

实例方法与状态

事件

插槽

属性 `AsamTreeV2Props`

实例方法与状态 `AsamTreeV2Expose`

类型 `AsamTreeV2Instance`

插槽 `AsamTreeV2Slots`

类型 `AsamTreeV2Node`

类型 `AsamTreeV2NodeData`

用法与契约补充说明

使用约定

`data`

`emptyText`

`height`

`props`

`highlightCurrent`

`showCheckbox`

`defaultCheckedKeys`

`checkStrictly`

`defaultExpandedKeys`

`indent`

`itemSize`

`icon`

`expandOnClickNode`

`checkOnClickNode`

`checkOnClickLeaf`

`currentNodeKey`

`accordion`

`filterMethod`

`perfMode`

`scrollbarAlwaysOn`

`onCheck-change`

`onCurrent-change`

`onNode-click`

`onNode-contextmenu`

`onNode-collapse`

`onNode-expand`

`onCheck`

`onNode-drop`

`key`

`ref`

`ref_for`

`ref_key`

`onVnodeBeforeMount`

`onVnodeMounted`

`onVnodeBeforeUpdate`

`onVnodeUpdated`

`onVnodeBeforeUnmount`

`onVnodeUnmounted`

`class`

`style`

`$`

`$data`

`$props`

`$attrs`

`$refs`

`$slots`

`$root`

`$parent`

`$host`

`$emit`

`$el`

`$options`

`$forceUpdate`

`$nextTick`