31 lines
1.1 KiB
Vue
31 lines
1.1 KiB
Vue
<script setup lang="ts">
|
||
// lazy + load：首次展开没有子节点的节点时请求数据，父层把 children 写回并把 key 记入 loadedKeys
|
||
import { ref } from 'vue'
|
||
import { G3Tree, type TreeNodeData } from '@g3soft/ui'
|
||
|
||
const treeData = ref<TreeNodeData[]>([
|
||
{ key: 'org-1', title: '总公司' },
|
||
{ key: 'org-2', title: '分公司' },
|
||
])
|
||
|
||
const loadedKeys = ref<string[]>([])
|
||
|
||
async function onLoad(node: TreeNodeData) {
|
||
// 模拟请求：200ms 后返回子节点
|
||
await new Promise((resolve) => setTimeout(resolve, 200))
|
||
node.children = [
|
||
{ key: `${node.key}-a`, title: `${node.title} / 部门 A` },
|
||
{ key: `${node.key}-b`, title: `${node.title} / 部门 B` },
|
||
]
|
||
treeData.value = [...treeData.value]
|
||
loadedKeys.value = [...loadedKeys.value, String(node.key)]
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div style="max-width: 320px">
|
||
<G3Tree v-model:loaded-keys="loadedKeys" :tree-data="treeData" lazy block-node @load="onLoad" />
|
||
<p style="margin: 8px 0 0; font-size: 12px; color: #6b7280">已加载：{{ loadedKeys.join(', ') || '无' }}</p>
|
||
</div>
|
||
</template>
|