Table.vue是一個基于Vue.js的表格組件，它可以幫助開發人員更快地創建復雜、可定制化的數據表格，支持排序、分頁、篩選等高級功能。

import Vue from 'vue'
import Table from 'path/to/Table.vue'
new Vue({
components: {
'my-table': Table
},
data: {
items: [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 35 }
]
},
methods: {
onEditItem(item) {
// Handle edit item
},
onDeleteItem(item) {
// Handle delete item
}
}
})

上面的代碼演示了如何將Table.vue組件引入Vue，并傳入data和methods。其中，data中的items數組包含了表格所需的數據，methods中定義了兩個事件處理函數，分別用于編輯和刪除表格中的數據項。

在Table.vue組件中，我們可以使用slot來自定義表格的各個部分。下面的示例展示了如何使用slot來自定義表格的表頭和表格行：

<my-table
:items="items"
:fields="[
{ key: 'name', label: 'Name' },
{ key: 'age', label: 'Age' }
]"
@edit-item="onEditItem"
@delete-item="onDeleteItem">
<template slot="table-row" slot-scope="{ item }">
<tr>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<button @click="onEditItem(item)">Edit</button>
<button @click="onDeleteItem(item)">Delete</button>
</td>
</tr>
</template>
<template slot="table-header" slot-scope="{ fields }">
<tr>
<th v-for="field in fields" :key="field.key">{{ field.label }}</th>
<th>Actions</th>
</tr>
</template>
</my-table>

上面的代碼將Table.vue組件使用了兩個slot，分別是table-row和table-header。其中，table-row用于渲染表格的每行數據，table-header用于渲染表格的表頭。slot-scope可以讓我們訪問父組件的數據和方法。

除了上述用法，Table.vue還支持以下高級功能：

• 列表項的排序
• 分頁功能
• 自定義過濾器
• 動態改變表格的寬度和高度
• 顯示/隱藏列

以上是Table.vue組件的一些基本用法和高級功能。使用它可以幫助我們快速構建出一個功能強大的數據表格。