Comment utiliser Vue pour implémenter une table de données modifiable ?

Avec le développement continu de la technologie frontale, les tableaux de données sont devenus l'un des outils importants pour la gestion d'entreprise et l'affichage des données. Dans le développement quotidien, il est parfois nécessaire de modifier ou d'ajouter des données dans le tableau de données. A ce stade, il est nécessaire d'implémenter un tableau de données modifiable. Cet article explique comment utiliser Vue pour implémenter une table de données modifiable.

1. Idées d'implémentation

Lors de l'implémentation de la fonction de table de données modifiable, nous devons prendre en compte les points suivants :

1. rendu des données : Rendre les données dans des tableaux pour l'affichage et l'édition.
2. Modification du tableau : modifiez les données dans le tableau.
3. Soumission des données : soumettez les données modifiées en arrière-plan ou effectuez d'autres opérations.

Sur la base des idées ci-dessus, nous pouvons créer une application contenant un composant de table de données via Vue pour réaliser les fonctions dont nous avons besoin.

2. Présentation des données

Tout d'abord, dans Vue, nous devons implémenter la table de données via des composants. Puisque nous utilisons une table de données modifiable, les éléments associés tels que les tables, les colonnes de données et les lignes de données doivent être créés dans le composant. Ce qui suit est un exemple de base de la structure des éléments du composant de table de données modifiable :

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns">{{col.title}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="col in columns">
          {{row[col.key]}}
        </td>
      </tr>
    </tbody>
  </table>
</template>

Dans le code ci-dessus, nous définissons deux attributs importants : colonnes et lignes code>. columns est utilisé pour définir les colonnes du tableau, y compris les titres, les noms de clés, etc. ; rows est utilisé pour afficher les données dans les lignes de données du tableau. columns 和 rows。columns 用于定义表格中的列，包括标题、键名等；rows 用于渲染表格数据行中的数据。

三、表格编辑

接下来，我们需要实现表格编辑功能。为了实现数据行可编辑，我们需要在组件中添加一个 editable 属性，用于标识当前数据行是否可编辑。当 editable 为 true 时，表格数据行可进行编辑。下面是组件代码的更新版本：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns">{{col.title}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in rows" :key="index" :class="{editable: row.editable}">
        <td v-for="col in columns">
          <template v-if="row.editable">
            <input v-model="row[col.key]">
          </template>
          <template v-else>{{row[col.key]}}</template>
        </td>
        <td>
          <button @click="editRow(index)">编辑</button>
          <button @click="saveRow(index)">保存</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

上述代码中，我们添加了一个按钮，并通过 editRow() 和 saveRow() 方法来控制数据行的编辑状态。当点击编辑按钮时，我们将行的 editable 属性设置为 true，表格进入编辑状态，此时会显示 input 标签用于编辑数据。当点击保存按钮后，我们将数据保存，保存完成后将行的 editable 属性设置为 false，退出编辑状态。

四、数据提交

在完成数据的编辑后，我们需要将数据提交到后台进行保存或者其他操作。这时，我们可以通过向组件添加一个 saveData()

3. Édition de table

Ensuite, nous devons implémenter la fonction d'édition de table. Afin de rendre la ligne de données modifiable, nous devons ajouter un attribut editable au composant pour identifier si la ligne de données actuelle est modifiable. Lorsque editable est true, les lignes de données du tableau peuvent être modifiées. Voici une version mise à jour du code du composant :

...省略前面代码...
methods: {
  editRow (index) {
    this.rows[index].editable = true
  },
  saveRow (index) {
    this.rows[index].editable = false
  },
  saveData () {
    // 提交数据到后台
    // ...
  }
}

Dans le code ci-dessus, nous avons ajouté un bouton et passé editRow() et saveRow() Méthode pour contrôler l'état d'édition des lignes de données. Lorsque vous cliquez sur le bouton d'édition, nous définissons l'attribut editable de la ligne sur true, et le tableau entre dans l'état d'édition. À ce moment, l'input La balise sera affichée pour Modifier les données. Lorsque vous cliquez sur le bouton Enregistrer, nous enregistrons les données. Une fois l'enregistrement terminé, définissons l'attribut <code>editable de la ligne sur false et quittons l'état d'édition.

4. Soumission des données

Après avoir terminé l'édition des données, nous devons soumettre les données en arrière-plan pour les sauvegarder ou d'autres opérations. À l'heure actuelle, nous pouvons y parvenir en ajoutant une méthode saveData() au composant. Dans cette méthode, nous pouvons soumettre les données modifiées en arrière-plan via des requêtes Ajax. La structure du code est la suivante : #🎜🎜#

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns">{{col.title}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in rows" :key="index" :class="{editable: row.editable}">
        <td v-for="col in columns">
          <template v-if="row.editable">
            <input v-model="row[col.key]">
          </template>
          <template v-else>{{row[col.key]}}</template>
        </td>
        <td>
          <button @click="editRow(index)">编辑</button>
          <button @click="saveRow(index)">保存</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true
    },
    rows: {
      type: Array,
      required: true
    }
  },
  methods: {
    editRow (index) {
      this.rows[index].editable = true
    },
    saveRow (index) {
      this.rows[index].editable = false
    },
    saveData () {
      // 提交数据到后台
      // ...
    }
  }
}
</script>

#🎜🎜# 5. Code complet #🎜🎜##🎜🎜#Enfin, nous intégrons tous les codes ci-dessus pour former un composant complet de table de données modifiable. Le code complet est le suivant : #🎜🎜#rrreee#🎜🎜# 6. Résumé #🎜🎜##🎜🎜# Cet article présente comment utiliser Vue pour implémenter des tableaux de données modifiables et réalise la présentation des données, l'édition des tableaux et la soumission des données. .fonctionne sous divers aspects. En utilisation réelle, nous pouvons encore améliorer la fonctionnalité du composant et optimiser ses performances en fonction de nos propres besoins pour mieux répondre aux besoins réels. #🎜🎜#

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!