30 lines
974 B
Vue
30 lines
974 B
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" />
|
|
</div>
|
|
</template>
|