Comment supprimer l'enregistrement actuel dans la table dans Vue.js

Vue.js est un framework progressif pour la création d'interfaces utilisateur. Il s'agit d'un projet open source fondé par Evan You. Le cœur de Vue.js est le modèle MVVM, qui implémente la mise à jour automatique des vues via le lecteur de données. Dans les applications Vue.js, nous devons souvent ajouter, supprimer, modifier et interroger des données, ce qui implique des opérations sur les tables. Comment supprimer l'enregistrement actuel dans la table dans Vue.js ?

Tout d'abord, nous devons préciser que Vue.js est un framework basé sur les données. Si nous voulons supprimer un enregistrement dans la table, nous devons d'abord maintenir une liste de données via Vue.js, puis l'utiliser. l'instruction v-for dans la page pour chaque enregistrement est rendue sous forme de ligne. Lorsque nous supprimons une ligne de données, cela équivaut à supprimer les données de la liste de données, puis la vue est automatiquement mise à jour. Par conséquent, nous devons maîtriser les deux opérations suivantes : 1. Comment maintenir la liste de données ; 2. Comment supprimer des données de la liste de données ;

1. Maintenir la liste de données

Nous pouvons définir un tableau dans l'option data de l'instance Vue.js pour maintenir la liste de données. Par exemple :

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. Supprimer des données

Dans Vue.js, nous pouvons supprimer un ou plusieurs éléments d'un tableau via la méthode splice(). La syntaxe de la méthode splice() est :

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

où :

• start : la position de départ à être delete ( En comptant à partir de 0)
• deleteCount : le nombre d'éléments à supprimer, s'il est 0, aucun élément ne sera supprimé
• item1, item2, ... : éléments à ajouter au tableau, si aucun élément n'est supprimé spécifié, splice () Supprimez uniquement les éléments, n'ajoutez pas d'éléments

Pour nos besoins, il nous suffit de supprimer les données correspondantes via l'index de l'enregistrement actuel et la méthode splice(). Par exemple :

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

où index est l'index de l'enregistrement actuel.

Lorsque nous cliquons sur le bouton Supprimer de la page, nous pouvons appeler la méthode deleteRecord() pour supprimer les données correspondantes. Par exemple, nous pouvons écrire ceci dans le modèle :

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

Ici, nous restituons chaque enregistrement dans une ligne via la directive v-for et ajoutons un bouton de suppression à chaque ligne. Lorsque l'on clique sur le bouton Supprimer, nous supprimons l'enregistrement de données correspondant en appelant la méthode deleteRecord().

Résumé

Dans Vue.js, supprimer l'enregistrement actuel dans la table nécessite de maîtriser deux opérations : 1. Maintenir la liste de données 2. Supprimer des données de la liste de données. Nous pouvons maintenir la liste de données en définissant un tableau dans l'instance Vue.js et supprimer les données de la liste de données via la méthode splice(). Lorsque nous cliquons sur le bouton Supprimer de la page, nous pouvons supprimer l'enregistrement de données correspondant en appelant cette méthode.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!