41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<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>
|