So löschen Sie den aktuellen Datensatz in der Tabelle in Vue.js

Vue.js ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Es ist ein Open-Source-Projekt, das von Evan You gegründet wurde. Der Kern von Vue.js ist das MVVM-Muster, das die automatische Aktualisierung von Ansichten über das Datenlaufwerk implementiert. In Vue.js-Anwendungen müssen wir häufig Daten hinzufügen, löschen, ändern und abfragen, was Operationen an Tabellen umfasst. Wie lösche ich den aktuellen Datensatz in der Tabelle in Vue.js?

Zunächst müssen wir klarstellen, dass Vue.js ein datengesteuertes Framework ist. Wenn wir einen Datensatz in der Tabelle löschen möchten, müssen wir zunächst eine Datenliste über Vue verwalten .js, und rendern Sie dann auf der Seite jeden Datensatz mithilfe der v-for-Direktive in eine Zeile. Wenn wir eine Datenzeile löschen, entspricht dies dem Entfernen der Daten aus der Datenliste. Anschließend wird die Ansicht automatisch aktualisiert. Daher müssen wir die folgenden zwei Vorgänge beherrschen: 1. Wie pflegt man die Datenliste? 2. Wie löscht man Daten aus der Datenliste?

1. Pflege der Datenliste

Wir können in der Datenoption der Vue.js-Instanz ein Array definieren, um die Datenliste zu verwalten. Zum Beispiel:

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. Daten löschen

In Vue.js können wir über splice() ein oder mehrere Elemente aus dem Array löschen Methodenelement. Die Syntax der splice()-Methode lautet:

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

wobei:

• start: Die zu löschende Startposition (ab 0 gezählt)
• deleteCount: Die Anzahl der zu löschenden Elemente, wenn sie 0 ist, es wird nicht gelöscht. Jedes Element
• item1, item2, ...: Elemente, die dem Array hinzugefügt werden sollen. Wenn kein Element angegeben ist, löscht splice() nur das Element und fügt das Element nicht hinzu

Für unsere Bedürfnisse müssen wir nur die entsprechenden Daten über den Index des aktuellen Datensatzes und die Methode splice() löschen. Beispiel:

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

wobei Index der Index des aktuellen Datensatzes ist.

Wenn wir auf der Seite auf die Schaltfläche „Löschen“ klicken, können wir die Methode deleteRecord() aufrufen, um die entsprechenden Daten zu löschen. Beispielsweise können wir dies in die Vorlage schreiben:

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

Hier rendern wir jeden Datensatz durch die v-for-Direktive in eine Zeile und fügen jeder Zeile eine Schaltfläche zum Löschen hinzu. Beim Klicken auf die Schaltfläche „Löschen“ löschen wir den entsprechenden Datensatz durch Aufruf der Methode deleteRecord().

Zusammenfassung

In Vue.js erfordert das Löschen des aktuellen Datensatzes in der Tabelle die Beherrschung von zwei Vorgängen: 1. Pflegen der Datenliste; 2. Löschen von Daten aus der Datenliste. Wir können die Datenliste verwalten, indem wir ein Array in der Vue.js-Instanz definieren und Daten über die Methode splice() aus der Datenliste löschen. Wenn wir auf der Seite auf die Schaltfläche „Löschen“ klicken, können wir den entsprechenden Datensatz löschen, indem wir diese Methode aufrufen.

Das obige ist der detaillierte Inhalt vonSo löschen Sie den aktuellen Datensatz in der Tabelle in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!