Vue.js 是一個用於建立使用者介面的漸進式框架，它是由 Evan You 創立的開源專案。 Vue.js 的核心是 MVVM 模式，它透過資料驅動來實現視圖的自動更新。在 Vue.js 應用程式中，我們經常需要對資料進行增刪改查操作，其中涉及了對表格的操作，如何在 Vue.js 中刪除表格中的當前記錄？
首先，我們需要明確，Vue.js 是一個資料驅動的框架，如果我們要刪除表格中的一筆記錄，我們首先需要透過Vue.js 維護一個資料列表，然後在頁面中透過v -for 指令將每個記錄渲染成一行。當我們刪除某一行資料時，相當於將該資料從資料清單中移除，然後視圖自動更新。因此，我們需要掌握以下兩個操作：1. 如何維護資料清單；2. 如何從資料清單中刪除資料。
我們可以在 Vue.js 實例的 data 選項中定義一個陣列來維護資料清單。例如：
data() {
return {
dataList: [
{id: 1, name: '小明', age: 20},
{id: 2, name: '小红', age: 22},
{id: 3, name: '小刚', age: 18},
{id: 4, name: '小李', age: 25},
{id: 5, name: '小张', age: 23},
]
}
}在 Vue.js 中，我們可以透過 splice() 方法從陣列中刪除一個或多個元素。 splice() 方法的語法為：
arr.splice(start[, deleteCount[, item1[, item2[, ...]]]])
##其中：deleteRecord(index) {
this.dataList.splice(index, 1);
}<template>
<div>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in dataList" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<button @click="deleteRecord(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>以上是如何在Vue.js中刪除表格中的目前記錄的詳細內容。更多資訊請關注PHP中文網其他相關文章！
