??在Vue中實現一個動態添加行的表格可以通過以下步驟來完成，如下所示。

步驟 1：設置表格的數據模型

??在Vue組件中定義表格的數據模型，通常使用一個數組來存儲表格的數據。每一行數據可以是一個對象，對象的屬性對應表格的列。

data() {return {tableData: [{ id: 1, name: 'John', age: 30 },{ id: 2, name: 'Doe', age: 25 }],newRow: { id: null, name: '', age: null } // 新添加行的初始數據};
},

步驟 2：渲染表格

??在Vue模板中使用v-for指令遍歷表格數據，渲染表格的行和列。

<table><thead><tr><th>ID</th><th>Name</th><th>Age</th></tr></thead><tbody><tr v-for="(item, index) in tableData" :key="index"><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td></tr></tbody>
</table>

步驟 3：添加行功能

??在模板中添加一個按鈕，通過點擊按鈕觸發添加新行的功能。

<button @click="addRow">Add Row</button>

??在Vue方法中實現添加行的邏輯。

methods: {addRow() {// 添加新行數據到表格數據數組this.tableData.push(Object.assign({}, this.newRow));}
}

完整示例代碼

<template><div><table><thead><tr><th>ID</th><th>Name</th><th>Age</th></tr></thead><tbody><tr v-for="(item, index) in tableData" :key="index"><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td></tr></tbody></table><button @click="addRow">Add Row</button></div>
</template><script>
export default {data() {return {tableData: [{ id: 1, name: 'John', age: 30 },{ id: 2, name: 'Doe', age: 25 }],newRow: { id: null, name: '', age: null } // 新添加行的初始數據};},methods: {addRow() {// 添加新行數據到表格數據數組this.tableData.push(Object.assign({}, this.newRow));}}
};
</script>

??這樣就實現了一個簡單的Vue表格，可以通過點擊按鈕動態添加行。在實際應用中，你可以根據需求進行擴展，例如支持行的編輯、刪除功能，或者根據用戶輸入動態更新新行的數據等。