52 lines
1.5 KiB
Vue
52 lines
1.5 KiB
Vue
<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>
|
||
</div>
|
||
</template>
|