Comment utiliser Vue pour créer une table de données modifiable et enregistrée en temps réel ?

Vue est un framework JavaScript populaire qui peut être utilisé pour créer une variété d'applications Web différentes. Parmi eux, le tableau de données est un composant souvent utilisé. Cependant, de nombreuses applications Web doivent permettre aux utilisateurs de modifier les tableaux de données et d'enregistrer ces modifications en temps réel. Alors, comment utiliser Vue pour implémenter cette fonction ? Dans cet article, nous expliquerons comment utiliser Vue pour créer des tableaux de données modifiables et enregistrés en temps réel, dans l'espoir de vous aider à mieux utiliser Vue dans le développement d'applications Web.

1. La structure de base du composant Vue

Avant d'utiliser Vue pour créer une table de données, nous devons d'abord comprendre la structure de base du composant Vue. Les composants Vue sont composés de trois parties : modèle (modèle), code logique (script) et style (style). Parmi ces trois parties, le modèle détermine le contenu d'affichage du composant, le code logique est responsable du traitement des données et de la logique du composant, et le style contrôle l'apparence du composant. Voici un exemple de code d'un composant Vue simple :

<template>
  <div class="my-component">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

<style>
.my-component {
  font-size: 20px;
}
</style>

Dans ce composant, la partie modèle contient uniquement un élément div et un espace réservé. Le code logique de ce composant définit une variable de données nommée message et lui attribue une valeur par défaut de « Hello, world ! ». Enfin, le style définit une taille de police de 20 pixels pour la classe .my-component.

2. Créez une table de données modifiables

Ensuite, nous montrerons comment utiliser Vue pour créer une table de données modifiable simple. Dans cet exemple, nous supposons que les données de la table sont fournies par un tableau JavaScript, qui peut ensuite être restitué dans la table à l'aide de la directive v-for de Vue.

1. Préparer les données

Dans le modèle et le code logique, nous devons utiliser une variable de données nommée rows pour stocker les données dans le tableau. Cette variable doit être un tableau, chaque élément représentant une ligne de données. Voici un exemple de tableau de lignes simple :

var rows = [
  { id: 1, name: 'Apple', price: 10 },
  { id: 2, name: 'Banana', price: 5 },
  { id: 3, name: 'Orange', price: 8 }
]

2 Rendu du tableau

Ensuite, nous pouvons utiliser l'instruction v-for de Vue pour restituer les données dans le tableau. Dans cet exemple, nous pouvons créer un élément de table et utiliser deux boucles v-for imbriquées, une parcourant chaque ligne et une autre parcourant chaque colonne. Plus précisément, un élément d'entrée est défini dans l'en-tête de colonne et sa valeur est le titre de la colonne actuelle. Un élément d'entrée est également défini dans chaque cellule afin que les utilisateurs puissent modifier les données du tableau.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns">
            <input v-model="column.title" />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows">
          <td v-for="column in columns">
            <input v-model="row[column.field]" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { id: 1, name: 'Apple', price: 10 },
        { id: 2, name: 'Banana', price: 5 },
        { id: 3, name: 'Orange', price: 8 }
      ],
      columns: [
        { field: 'id', title: 'ID' },
        { field: 'name', title: 'Name' },
        { field: 'price', title: 'Price' }
      ]
    }
  }
}
</script>

3. Enregistrer les modifications

Enfin, lorsque l'utilisateur modifie les données dans le tableau, nous devons enregistrer ces modifications dans le tableau de lignes. Nous pouvons utiliser l'option watch de Vue pour écouter les changements dans les données de chaque ligne et mettre à jour leurs positions correspondantes dans le tableau de lignes. Plus précisément, nous pouvons définir une variable de données nommée editedRow pour stocker la ligne en cours de modification par l'utilisateur. Ensuite, ajoutez les événements @focus et @blur à la cellule pour mettre à jour la valeur de la variable editedRow lorsque l'utilisateur commence et termine la modification. Enfin, lorsque la variable editedRow change, nous pouvons la sauvegarder dans le tableau rows.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns">
            <input v-model="column.title" />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :class="{ 'editing': row === editedRow }">
          <td v-for="column in columns">
            <input v-model="row[column.field]"
                  @focus="editedRow = row"
                  @blur="editedRow = null" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { id: 1, name: 'Apple', price: 10 },
        { id: 2, name: 'Banana', price: 5 },
        { id: 3, name: 'Orange', price: 8 }
      ],
      columns: [
        { field: 'id', title: 'ID' },
        { field: 'name', title: 'Name' },
        { field: 'price', title: 'Price' }
      ],
      editedRow: null
    }
  },
  watch: {
    editedRow: function(newValue, oldValue) {
      if (oldValue && oldValue !== newValue) {
        // Save changes
        console.log('Changes saved for row:', oldValue)
      }
    }
  }
}
</script>

Dans cet exemple, lorsque l'utilisateur commence à modifier une ligne, son style passe à la classe .editing. Cette classe peut être utilisée pour spécifier l'apparence de la cellule en cours d'édition. Lorsque l'utilisateur termine l'édition, nous détectons dans l'option watch que la variable editedRow passe de non nulle à vide, puis enregistrons les modifications dans le tableau rows.

3. Conclusion

Cet article montre comment utiliser Vue pour créer une table de données modifiable et enregistrée en temps réel. Dans cet exemple, nous utilisons la directive v-for de Vue pour restituer les données dans le tableau et utilisons l'option watch pour enregistrer les modifications apportées aux données dans chaque ligne. Les modèles, le code logique et les parties de style de Vue peuvent nous aider à mieux organiser notre code et à rendre nos applications plus faciles à maintenir et à développer. À travers cet exemple, j'espère qu'il pourra vous aider à mieux utiliser Vue dans le développement d'applications Web.

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!