如何在Vue.js中刪除表格中的目前記錄

Vue.js 是一個用於建立使用者介面的漸進式框架，它是由 Evan You 創立的開源專案。 Vue.js 的核心是 MVVM 模式，它透過資料驅動來實現視圖的自動更新。在 Vue.js 應用程式中，我們經常需要對資料進行增刪改查操作，其中涉及了對表格的操作，如何在 Vue.js 中刪除表格中的當前記錄？

首先，我們需要明確，Vue.js 是一個資料驅動的框架，如果我們要刪除表格中的一筆記錄，我們首先需要透過Vue.js 維護一個資料列表，然後在頁面中透過v -for 指令將每個記錄渲染成一行。當我們刪除某一行資料時，相當於將該資料從資料清單中移除，然後視圖自動更新。因此，我們需要掌握以下兩個操作：1. 如何維護資料清單；2. 如何從資料清單中刪除資料。

1. 維護資料清單

我們可以在 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},
        ]
    }
}

2. 刪除資料

在 Vue.js 中，我們可以透過 splice() 方法從陣列中刪除一個或多個元素。 splice() 方法的語法為：

arr.splice(start[, deleteCount[, item1[, item2[, ...]]]])

##其中：

start：需要刪除的起始位置（從0 開始計數）
• deleteCount：要刪除的元素個數，如果為0，則不刪除任何元素
• item1 , item2, ...：要新增到陣列的元素，如果不指定任何元素，則splice() 只刪除元素，不新增元素

對於我們的需求，我們只需要通過當前記錄的索引（index）及splice() 方法來刪除對應的資料。例如：

deleteRecord(index) {
    this.dataList.splice(index, 1);
}

其中，index 為目前記錄的索引。

當我們點擊頁面中的刪除按鈕時，我們就可以呼叫 deleteRecord() 方法來刪除對應的資料了。例如，我們可以在範本中這樣寫：

<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>

這裡，我們透過 v​​-for 指令將每個記錄渲染成一行，並為每一行新增一個刪除按鈕。當點擊刪除按鈕時，我們透過呼叫 deleteRecord() 方法來刪除對應的資料記錄。

總結

在 Vue.js 中，刪除表格中的目前記錄需要掌握兩個動作：1. 維護資料清單；2. 從資料清單中刪除資料。我們可以在 Vue.js 實例中透過定義一個數組來維護資料列表，並透過 splice() 方法來從資料列表中刪除資料。當我們點擊頁面中的刪除按鈕時，我們可以透過呼叫該方法來刪除對應的資料記錄。

以上是如何在Vue.js中刪除表格中的目前記錄的詳細內容。更多資訊請關注PHP中文網其他相關文章！