u

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+// fieldNames 适配后端结构；#title 插槽自定义节点渲染；节点字段可控制图标/禁用
+import { ref } from 'vue'
+import { G3Button, G3Tag, G3Tree, type TreeNodeData } from '@g3soft/ui'
+import { Folder, FileText } from '@lucide/vue'
+
+// 后端字段：id / name / nodes
+const treeData = ref<TreeNodeData[]>([
+  {
+    id: 'f1',
+    name: '设计稿',
+    icon: Folder,
+    nodes: [
+      { id: 'f1-1', name: '首页.sketch', icon: FileText },
+      { id: 'f1-2', name: '详情页.sketch', icon: FileText, disabled: true },
+    ],
+  },
+  { id: 'f2', name: '需求文档.md', icon: FileText },
+])
+
+const selectedKeys = ref<string[]>([])
+</script>
+
+<template>
+  <div style="max-width: 360px">
+    <G3Tree
+      v-model:selected-keys="selectedKeys"
+      :tree-data="treeData"
+      :field-names="{ key: 'id', title: 'name', children: 'nodes' }"
+      default-expand-all
+      block-node
+    >
+      <!-- #title 插槽：node 是原始数据，可自由渲染 -->
+      <template #title="{ node, selected }">
+        <span style="display: inline-flex; align-items: center; gap: 8px; width: 100%">
+          <span>{{ node.name }}</span>
+          <G3Tag v-if="selected" variant="secondary">当前</G3Tag>
+          <G3Button
+            v-if="!node.disabled"
+            size="small"
+            type="link"
+            style="margin-left: auto"
+            @click.stop="selectedKeys = [String(node.id)]"
+          >
+            选中
+          </G3Button>
+        </span>
+      </template>
+    </G3Tree>
+
+    <p style="margin: 8px 0 0; font-size: 12px; color: #6b7280">选中：{{ selectedKeys.join(', ') || '无' }}</p>
+  </div>
+</template>