Vue Ant Design 樹，是一種高度可定制的UI組件，它便于用戶對大量樹形結構數據的可視化展示和導航。

以下是一個基礎的樹組件的代碼：

< template >< a-tree
:tree-data="treeData"
/>< /template >< script >import { defineComponent } from 'vue'
import { Tree } from 'ant-design-vue'
export default defineComponent({
name: 'BasicTree',
components: {
ATree: Tree,
},
data() {
return {
treeData: [
{
title: 'Node1',
key: '0-0',
children: [
{
title: 'Child Node1',
key: '0-0-0',
},
{
title: 'Child Node2',
key: '0-0-1',
}
]
},
{
title: 'Node2',
key: '0-1',
children: [
{
title: 'Child Node3',
key: '0-1-0',
},
{
title: 'Child Node4',
key: '0-1-1',
}
]
}
]
}
}
})< /script >

在這個例子中，我們定義了一個名為BasicTree的Vue組件，使用了Ant Design Vue中的Tree組件。我們定義了一個變量treeData，用于存放樹的數據。樹數據由一個數組組成，表示樹的每一個節點。每個節點由一個對象構成，包含鍵名title和key，分別表示節點的名稱和鍵值。如果該節點存在子節點，則在該對象中再加上一個鍵為children的數組，用于存放子節點。

我們通過傳遞treeData變量給組件a-tree，來渲染出樹形結構。

通過定義自己的節點類型和樣式，我們可以輕松地實現自己的樹形結構。Ant Design Vue樹是一個強大的工具，能夠處理大規模的數據，并將其可視化呈現。