在許多網頁應用程序中，表格都是必不可少的組件。表格中通常有大量的數據，對于用戶來說，可以通過添加新的行或編輯現有的行，來更好地查看和處理數據。在Vue框架中，使用組件化的方法可以輕松地實現這些功能。

在Vue中，我們可以在單個文件中創建組件。其中包括模板、樣式和JavaScript代碼。對于表格組件，我們可以使用v-for循環來遍歷數據，并用動態數據填充表格行。

< template >< div >< table >< tr v-for="row in tableData" :key="row.id" >< td >{{ row.name }}< td >{{ row.email }}< td >{{ row.phone }}< button @click="addRow">Add Row< /template >< script >export default {
data() {
return {
tableData: [
{ id: 1, name: 'Alice', email: 'alice@example.com', phone: '123-456-7890' },
{ id: 2, name: 'Bob', email: 'bob@example.com', phone: '234-567-8901' },
{ id: 3, name: 'Charlie', email: 'charlie@example.com', phone: '345-678-9012' }
]
};
},
methods: {
addRow() {
const newId = this.tableData.length + 1;
const newRow = { id: newId, name: '', email: '', phone: '' };
this.tableData.push(newRow);
}
}
};< /script >

在這個例子中，使用v-for指令遍歷tableData數組，為每個數據對象創建一個表格行。該數組包含三個項，每個項都代表一個表格行，以及該行的id、name、email和phone。每個表格單元是用{{ ... }}包含的Vue插值表達式表示的。我們還定義了一個Add Row按鈕，當用戶點擊該按鈕時，我們調用addRow()方法來向tableData數組中添加一個新項。此方法創建一個新的數據對象，其ID用當前數組長度加1表示，并將該行添加到tableData數組中。

通過添加新的行，我們可以動態地更新表格內容。Vue的反應性系統可以自動追蹤數據的變化，并刷新表格以反映這些變化。

表格組件還有很多其他的實現方式，包括使用數據綁定和組件插槽來更好地控制表格的行為和外觀。底線是Vue的靈活性和響應性讓表格組件的實現非常方便。無論您的應用程序需要什么樣的表格，Vue都能提供一個高度可定制的方案。