28 lines
813 B
Vue
28 lines
813 B
Vue
<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>
|