Comment modifier et annuler des tables dans Vue ?

Comment modifier et annuler des tables dans Vue ?

Dans le développement de Vue, il est souvent nécessaire de traiter l'édition et la modification des tables, il est donc particulièrement important d'éditer et d'annuler les tables. Ici, cet article explique comment modifier et annuler des tables dans Vue.

1. Liaison des données du tableau

Dans le tableau, nous devons d'abord restituer les données dans le tableau, les données doivent donc être liées. Dans Vue, le parcours et le rendu des données peuvent être réalisés en utilisant la directive v-for.

Par exemple, définissez un exemple de données dans data comme suit :

data() {
  return {
    tableData: [
      {name: '张三', age: 20},
      {name: '李四', age: 22},
      {name: '王五', age: 25},
    ],
    editIndex: -1,
  }
}

Parmi eux, un tableau tableData est défini, qui stocke trois objets, chaque objet représentant une ligne de données dans le tableau. editIndex représente la ligne du tableau en cours de modification et la valeur initiale est -1, indiquant l'état non modifié.

Dans le tableau, vous pouvez utiliser le code suivant pour restituer les données :

<table>
  <tr v-for="(item, index) in tableData" :key="index">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
    <td>
      <button @click="editRow(index)">编辑</button>
    </td>
  </tr>
</table>

Dans le code ci-dessus, utilisez l'instruction v-for pour parcourir les données du tableau tableData et utilisez l'attribut :key pour spécifier l'unique identifiant de chaque élément. En même temps, chaque ligne du tableau possède un bouton "Modifier". Cliquer sur ce bouton mettra la ligne actuelle en statut d'édition.

2. Changement de l'état d'édition de la table

Dans Vue, vous pouvez enregistrer l'index de la ligne en cours d'édition en définissant une variable editIndex. Lorsque l'utilisateur clique sur le bouton "Modifier", l'index de la ligne où se trouve le bouton est défini sur la valeur de editIndex et les données de la ligne du tableau sont affichées dans un état modifiable. Lorsque l'utilisateur clique sur le bouton Enregistrer ou Annuler, réinitialise la valeur de editIndex à -1, indiquant qu'aucune ligne n'est actuellement en cours de modification.

Dans le code, vous pouvez utiliser le code suivant pour changer le statut d'édition :

methods: {
  // 编辑表格行
  editRow(index) {
    if (this.editIndex !== -1) {
      // 如果已经在编辑状态，则提示用户
      alert('请先完成当前行的编辑');
      return;
    }
    // 将该行的所以设置为编辑状态
    this.editIndex = index;
  },
  // 保存表格行
  saveRow() {
    // 执行保存操作
    // ...

    // 重置编辑状态
    this.editIndex = -1;
  },
  // 取消表格行
  cancelRow() {
    // 重置编辑状态
    this.editIndex = -1;
  }
}

Dans le code ci-dessus, la méthode editRow est utilisée pour définir l'état d'édition de la ligne du tableau, la méthode saveRow est utilisée pour enregistrer les résultats de l'édition de table, et la méthode CancelRow est utilisée pour annuler l'opération d'édition de table.

3. Modification des lignes du tableau

Dans le tableau, lors de l'entrée dans l'état d'édition, les données des lignes du tableau doivent être affichées dans un état modifiable. Dans Vue, cet effet peut être obtenu en utilisant des éléments de formulaire tels que input et select.

Par exemple, lors de l'affichage des données de la colonne nom et âge dans une ligne de tableau, vous pouvez utiliser le code suivant :

<tr v-for="(item, index) in tableData" :key="index">
  <td>
    <input type="text" :value="editIndex === index ? item.name : item.name">
  </td>
  <td>
    <input type="text" :value="editIndex === index ? item.age : item.age">
  </td>
  <td>
    <button @click="editRow(index)">编辑</button>
    <button @click="saveRow()">保存</button>
    <button @click="cancelRow()">取消</button>
  </td>
</tr>

Dans le code ci-dessus, l'élément d'entrée est utilisé pour réaliser l'état modifiable des données de la colonne nom et âge. Utilisez trois boutons pour changer l'état d'édition de la table. Le bouton "Enregistrer" est utilisé pour enregistrer les résultats de l'édition, stocker les données sur le serveur d'arrière-plan ou mettre à jour les données dans l'état local.

Résumé

Grâce aux étapes ci-dessus, nous pouvons modifier et annuler des tables dans Vue. Dans le développement réel, les fonctions d'édition peuvent être personnalisées en fonction des besoins, telles que la mise en œuvre de fonctions d'édition personnalisées pour les cellules du tableau, l'ajout d'invites de somme de contrôle pour les données du tableau, etc.

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!