在表單中加入表格是常見需求，Vue提供了多種方式來實現這個目標。我們可以使用Vue的template語法或者直接操作DOM來創建表格。下面將介紹使用template語法實現表格。 首先我們需要在Vue的實例中定義一個數據變量來存儲要顯示的表格數據，例如：

data: {
tableData: [
{ name: 'John', age: 20 },
{ name: 'Mary', age: 18 },
{ name: 'Tom', age: 22 }
]
}

接下來在template中通過v-for指令來循環遍歷數據，并使用表格標簽創建表格。例如：

Name
Age
{{ item.name }}
{{ item.age }}

上面的代碼中，我們使用v-for指令循環遍歷tableData數組中的每個對象，并使用:key指令指定唯一的鍵值。接著在表格中使用{{ item.name }}和{{ item.age }}來綁定數據。這樣就可以在表格中顯示數據了。 如果我們需要給表格添加一些交互性，例如將表格行變成可選狀態，我們可以使用Vue的計算屬性來實現。首先我們需要在數據中定義一個變量selectedItem來存儲當前選中的表格行索引。然后在計算屬性中根據選中狀態返回不同的樣式類名。例如：

data: {
selectedItem: null,
// ...
},
computed: {
getRowClass() {
return function (index) {
if (index === this.selectedItem) {
return 'selected';
} else {
return '';
}
}
}
}

然后在模板中使用:class指令綁定計算屬性返回的樣式類名即可。例如：

上面的代碼中，我們使用@click事件綁定選中狀態。當用戶單擊表格行時，selectedItem變量將設置為當前行的索引，然后計算屬性會根據該變量返回不同的樣式類名。最后使用:class指令綁定計算屬性返回的樣式類名即可實現表格行的選中狀態。 總之，Vue提供的表格功能非常強大和靈活。開發者們可以根據自己的需求選擇不同的方式來實現表格，從而讓應用更加美觀和交互性。