u

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// 展开状态：受控 expandedKeys（传了就是受控）与非受控默认值
+import { ref } from 'vue'
+import { G3Button, G3Space, G3Tree, type TreeNodeData } from '@g3soft/ui'
+
+const treeData: TreeNodeData[] = [
+  {
+    key: 'a',
+    title: 'A 组',
+    children: [
+      { key: 'a1', title: 'A-1', children: [{ key: 'a11', title: 'A-1-1' }] },
+      { key: 'a2', title: 'A-2' },
+    ],
+  },
+  { key: 'b', title: 'B 组', children: [{ key: 'b1', title: 'B-1' }] },
+]
+
+// 受控：所有展开/收起都要经过 update:expandedKeys
+const expandedKeys = ref<string[]>(['a', 'a1'])
+
+function expandAll() {
+  expandedKeys.value = ['a', 'a1', 'a2', 'b', 'b1']
+}
+
+function collapseAll() {
+  expandedKeys.value = []
+}
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex; max-width: 320px">
+    <G3Space :size="8">
+      <G3Button size="small" type="outline" @click="expandAll">全部展开</G3Button>
+      <G3Button size="small" type="outline" @click="collapseAll">全部收起</G3Button>
+    </G3Space>
+
+    <!-- 传了 expanded-keys 即受控；双击节点也能展开（会走 update 事件） -->
+    <G3Tree v-model:expanded-keys="expandedKeys" :tree-data="treeData" block-node />
+  </G3Space>
+</template>