u

code/g3soft-libs/docs/examples/tree/lazy.vue

@@ -0,0 +1,30 @@
+<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>