Méthode d'implémentation de la table modifiable dans le document Vue

Vue.js est l'un des frameworks front-end les plus populaires à l'heure actuelle. Il utilise une approche basée sur les données pour créer des interfaces utilisateur et présente les caractéristiques de liaison de données et de composants bidirectionnels. Dans la documentation Vue.js, une méthode d'implémentation d'une table modifiable est fournie. Cet article présentera les étapes d'implémentation spécifiques de cette méthode.

1. Préparer les données

Tout d'abord, vous devez préparer un ensemble de données. Ici, nous prenons comme exemple les informations sur les étudiants. Le format des données peut être un tableau, chaque élément contenant des attributs tels que le nom, le sexe, l'âge, etc.

students: [
   { name: '小明', gender: '男', age: 18 },
   { name: '小红', gender: '女', age: 17 },
   { name: '小刚', gender: '男', age: 19 },
   { name: '小丽', gender: '女', age: 18 }
]

2. Définissez le tableau

Ensuite, vous devez définir un composant de tableau, qui est utilisé pour afficher les données et prend en charge le clic pour entrer en mode édition pour modifier les données. La syntaxe du modèle de Vue.js est utilisée ici pour définir le tableau, dans lequel l'instruction v-for est utilisée pour parcourir les données de la liste pour afficher les informations de chaque étudiant ; l'instruction v-if est utilisée pour contrôler les conditions de ; entrer en mode édition. Le code est le suivant :

<template>
   <table>
      <thead>
         <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th></th>
         </tr>
      </thead>
      <tbody>
         <tr v-for="(student, index) in students" :key="index">
            <td v-if="!student.editable">{{ student.name }}</td>
            <td v-else><input v-model="student.name" /></td>
            <td v-if="!student.editable">{{ student.gender }}</td>
            <td v-else>
               <select v-model="student.gender">
                  <option value="男">男</option>
                  <option value="女">女</option>
               </select>
            </td>
            <td v-if="!student.editable">{{ student.age }}</td>
            <td v-else><input v-model.number="student.age" /></td>
            <td>
               <button v-if="!student.editable" @click="toggleEdit(index)">编辑</button>
               <button v-else @click="toggleEdit(index)">保存</button>
            </td>
         </tr>
      </tbody>
   </table>
</template>

Dans le code ci-dessus, l'attribut student.editable est utilisé pour déterminer si la ligne de données actuelle est en mode édition. S'il est faux, le contenu de la cellule est affiché, sinon une entrée ou une sélection. L'étiquette s'affiche afin que l'utilisateur puisse modifier les données. Dans le même temps, un événement click est lié à la fin du code pour changer le mode d'édition.

Afin de définir la méthode toggleEdit utilisée dans le code ci-dessus, nous devons ajouter du code à la section script de Vue.js.

<script>
export default {
   data() {
      return {
         students: [ // 准备数据
            { name: '小明', gender: '男', age: 18 },
            { name: '小红', gender: '女', age: 17 },
            { name: '小刚', gender: '男', age: 19 },
            { name: '小丽', gender: '女', age: 18 }
         ]
      };
   },
   methods: {
      toggleEdit(index) {
         this.students[index].editable = !this.students[index].editable;
      }
   }
};
</script>

Dans le code ci-dessus, la méthode toggleEdit est utilisée pour changer l'état modifiable de l'élément à la position d'index spécifiée. En même temps, ajoutez l'attribut modifiable à l'option data, la valeur initiale étant fausse.

data() {
   return {
      students: [
         { name: '小明', gender: '男', age: 18, editable: false },
         { name: '小红', gender: '女', age: 17, editable: false },
         { name: '小刚', gender: '男', age: 19, editable: false },
         { name: '小丽', gender: '女', age: 18, editable: false }
      ]
   };
}

3. Complet

Après avoir terminé l'écriture du code ci-dessus, vous pouvez implémenter un tableau simple et modifiable. L'utilisateur peut entrer dans le mode d'édition en cliquant sur le bouton « Modifier », modifier les données, puis cliquer à nouveau sur le bouton « Enregistrer » pour terminer la modification et quitter le mode d'édition.

En utilisation réelle, vous devrez peut-être ajouter des fonctions de vérification, de soumission et d'autres fonctions. Cependant, nous pouvons rapidement implémenter ces fonctions et améliorer l'efficacité du développement grâce aux méthodes ci-dessus et à d'autres fonctionnalités de Vue.js.

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!