在前端開發中，表格是一個非常常用的組件，而表格的排序也是很常見的功能。本文將介紹如何使用Vue實現表格td的排序功能。

首先，在Vue中，表格通常是用v-for指令渲染的。為了實現排序，我們需要在數據源中添加一個排序字段，以及一個排序的方法。

data: {
tableData: [
{name: 'Alice', age: 20, address: 'Beijing', sort: 1},
{name: 'Bob', age: 25, address: 'Shanghai', sort: 2},
{name: 'Charlie', age: 30, address: 'Guangzhou', sort: 3},
// ...
],
sortBy: '',
sortType: 'asc',
},
methods: {
sortTable(field) {
if (this.sortBy === field) {
this.sortType = this.sortType === 'asc' ? 'desc' : 'asc';
} else {
this.sortBy = field;
this.sortType = 'asc';
}
this.tableData.sort((a, b) =>{
if (this.sortType === 'asc') {
return a[field] >b[field] ? 1 : -1;
} else {
return a[field]< b[field] ? 1 : -1;
}
});
},
},

在上面的代碼中，tableData是我們要渲染的表格數據，其中sort字段用來存儲排序后的順序。sortBy和sortType分別用來存儲當前排序的字段和排序類型。

sortTable方法是用來執行排序的，它接受一個參數field，表示要按哪個字段排序。如果當前已經按該字段排序，則翻轉排序順序，否則將排序字段設為該字段，排序類型設為升序。

最后，我們調用JavaScript的sort方法對表格數據進行排序。如果是升序排序，我們返回a[field] >b[field] ? 1 : -1，否則返回a[field]< b[field] ? 1 : -1，這樣就可以排序了。

現在，我們只需要在表頭的th標簽中添加一個點擊事件，調用sortTable方法即可：

名稱年齡地址{{ item.name }}{{ item.age }}{{ item.address }}

在以上代碼中，我們在th標簽中添加了@click事件，調用sortTable方法并傳入要排序的字段。在tbody中，我們依然使用v-for指令渲染表格數據。

至此，我們已經實現了表格td排序功能。當點擊表頭的th標簽時，表格數據將按照對應字段排序，再次點擊則翻轉排序順序。