u

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// 最基础：treeData 是嵌套结构，默认按 { key, title, children } 取值
+import { ref } from 'vue'
+import { G3Tree, type TreeNodeData } from '@g3soft/ui'
+
+const treeData: TreeNodeData[] = [
+  {
+    key: 'design',
+    title: '设计',
+    children: [
+      { key: 'design/ui', title: 'UI 规范' },
+      { key: 'design/icon', title: '图标库' },
+    ],
+  },
+  { key: 'frontend', title: '前端' },
+  { key: 'backend', title: '后端' },
+]
+
+const selectedKeys = ref<string[]>(['design/ui'])
+</script>
+
+<template>
+  <div style="max-width: 320px">
+    <G3Tree v-model:selected-keys="selectedKeys" :tree-data="treeData" default-expand-all />
+    <p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">选中：{{ selectedKeys.join(', ') || '无' }}</p>
+  </div>
+</template>