vue-table implementiert das Hinzufügen und Löschen

In diesem Artikelbeispiel wird der spezifische Code für Vue-Table zum Hinzufügen und Löschen zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

1. Code

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="utf-8">
    <title>vue-table Beispiel</title>
    <Stil>
        .Tabellenbox {
            Höhe: automatisch;
            Breite: 90%;
            Marge: 5 % Auto;
        }

        .Tisch {
            Rahmen-Zusammenbruch: Zusammenbruch;
            Breite: 100 %;
            Höhe: automatisch;
        }

        h1 {
            Textausrichtung: zentriert;
        }
    </Stil>
</Kopf>
<Text>
<div id="app">
    <div Klasse="Tabellenfeld">
        <h1>Tabellenübungen</h1>
        <Eingabetyp="Text" v-Modell="Text"/>
        <button @click="add">Hinzufügen</button>
        <Tabelle Klasse="Tabelle" Grenze="1">
            <Kopf>
            <tr>
                <th>Seriennummer</th>
                <th>Marke</th>
                <th>Zeit</th>
                <th>Betrieb</th>
            </tr>

            </thead>
            <tbody>
            <tr v-for="(v,k) in Liste" :key="k">
                <th>{{v.id}}</th>
                <th>{{v.name}}</th>
                <th>{{v.Zeit}}</th>
                <th>
                    <a href="#" @click.prevent="del(k)">Löschen</a>
                </th>
            </tr>
            </tbody>
        </Tabelle>
    </div>

</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<Skript>

    var vm = neuer Vue({
        el: '#app',
        Daten: {
            Zahl: 1,
            Liste: [],
            text: '',

        },
        Methoden: {
            hinzufügen: Funktion () {
                diese.Liste.unshift({
                    "id": diese.num++,
                    "Name": dieser.Text,
                    "Zeit": neues Date().toLocaleString(),
                });
            },
            del: Funktion (Index) {
                if (confirm("Möchten Sie die aktuelle Zeile wirklich löschen")) {
                    diese.Liste.splice(index, 1);
                }

            },

        }
    });
</Skript>

2. Wirkung der Operation

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Die Antd-Vue-Tabellenkomponente fügt ein Klickereignis hinzu, um auf eine Datenzeile zu klicken (Tutorial)
vuejs Elementtabelle - Zeilen hinzufügen, ändern, Zeilen einzeln löschen, Zeilen stapelweise löschen
Die VUE-Tabelle fügt dynamisch eine Datenspalte hinzu und die neu hinzugefügten Daten können nicht bearbeitet werden (die an das V-Modell gebundenen Daten können nicht in Echtzeit aktualisiert werden).

<<: Detaillierte Erläuterung von vier Lösungen für die MySQL Active-Active-Synchronreplikation

>>: Detaillierte Erklärung zur Verwendung von awk unter Linux