樹形表格是一種非常常見的數據展示方式，適用于表格數據之間具有父子關系的情況。Vue提供了treetable組件，方便我們快速構建一個樹形表格。

首先，我們需要在頁面中引入Vue和treetable組件：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-treetable"></script>

接著，我們需要準備一個數據源，這個數據源應該是一個嵌套的對象數組，每個對象都應該包括一個id字段和一個children字段（如果有子節點的話），例如：

// 數據源
const dataSource = [
{
id: 1,
name: '父節點1',
children: [
{
id: 2,
name: '子節點1'
}
]
},
{
id: 3,
name: '父節點2',
children: [
{
id: 4,
name: '子節點2.1',
children: [
{
id: 5,
name: '子節點2.1.1'
}
]
},
{
id: 6,
name: '子節點2.2'
}
]
}
];

接下來，我們就可以使用treetable組件來渲染這個樹形表格了，組件的使用非常簡單，只需要將數據源和表頭數據傳遞給組件即可：

<div id="app">
<tree-table :data="dataSource" :columns="columns"></tree-table>
</div>
// 表頭數據
const columns = [
{
title: '節點名稱',
key: 'name'
}
];
// 初始化 Vue 實例
new Vue({
el: '#app',
data: {
dataSource: dataSource,
columns: columns
}
});

我們也可以通過slot來自定義每一列的內容，這在實際項目中非常有用，例如我們可以在表格中顯示一個操作按鈕：

<tree-table :data="dataSource" :columns="columns">
<template slot="name" scope="props">
{{ props.row.name }}
<button @click="handleClick(props.row)">操作</button>
</template>
</tree-table>

以上就是Vue中使用treetable組件構建樹形表格的基本示例，希望能對大家有所幫助。