Comment personnaliser le tableau dans vue

Vue est un framework léger largement utilisé dans le développement Web. Dans Vue, les développeurs peuvent facilement personnaliser divers composants de l'interface utilisateur, tels que des tableaux, des listes, etc. Cet article explique comment utiliser Vue pour personnaliser les tables.

1. L'idée de base de la table personnalisée de Vue

L'idée de base de la table personnalisée de Vue est d'utiliser la fonction de composition de Vue pour diviser la table en composants séparés et réaliser le rendu des données de la table via les données. liaison et traitement des événements et fonctionnalités interactives.

2. Conception de la structure des tables

Dans Vue, la conception de la structure des tables personnalisées est très flexible. Une manière courante consiste à utiliser la structure suivante :

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" v-bind:key="index">
        <td v-for="(value, key) in item">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

Dans cette structure, le tableau est composé de deux parties : l'en-tête et le corps. L'en-tête se compose de la balise thead et de la balise th, et les noms de colonnes de l'en-tête du tableau sont rendus en fonction des noms de clés dans les données du tableau. Le corps du tableau se compose de la balise tbody et des balises tr et td. Chaque ligne et colonne des données du tableau est itérée via l'instruction v-for. De cette façon, nous pouvons utiliser les modèles de base ci-dessus pour générer automatiquement des tableaux.

3. L'idée d'implémenter des tables avec des composants Vue

L'idée d'implémenter des tables avec des composants Vue est de lier la structure et les données de la table dans un composant pour implémenter le style et la logique d'interaction de la table.

1. Transfert de données de table

Dans Vue, vous pouvez utiliser l'attribut props pour transmettre les données de table aux sous-composants. Ici, les accessoires, les données, les attributs calculés et autres sont généralement utilisés pour définir les données.

<script>
  export default {
    name: 'Table',
    props: {
      headers: Array,
      items: Array
    },
    data() {
      return {
        sortedHeaders: []
      }
    },
    computed: {
      sortedItems() {
        return this.sortBy([...this.items], [...this.sortedHeaders])
      }
    },
  }
</script>

Dans cet extrait de code, nous définissons un composant Table et transmettons les propriétés des en-têtes et des éléments de la table au composant enfant. Ensuite, un tableau sortedHeaders est défini dans le composant pour stocker l'état de tri de la table, et la fonction de tri sortedItems() est définie dans calculé. Cette fonction utilise la méthode sortBy() pour implémenter le tri et renvoie les données tabulaires triées.

2. Logique de rendu de table

Le rendu des composants utilise généralement la balise de modèle et utilise v-bind, v-on et d'autres instructions pour lier les données et les événements au composant.

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers"
            v-bind:key="header"
            v-on:click="sortTable(header)">
          {{ header }} {{ getSortIcon(header) }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in sortedItems" v-bind:key="index">
        <td v-for="(value, key) in item">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

Ici, nous utilisons l'instruction v-for pour restituer chaque colonne du tableau et définissons une fonction sortTable() pour implémenter la fonction de tri. En parallèle, nous utilisons également la fonction getSortIcon() pour afficher l'icône de l'état de tri du tableau.

3. Traitement des événements de la table

Enfin, nous devons implémenter la logique de traitement des événements de la table dans le composant Vue. L'instruction v-on et la fonction de traitement d'événements sont généralement utilisées ici pour implémenter le traitement associé.

<script>
  export default {
    name: 'Table',
    props: {
      headers: Array,
      items: Array
    },
    data() {
      return {
        sortedHeaders: []
      }
    },
    computed: {
      sortedItems() {
        return this.sortBy([...this.items], [...this.sortedHeaders])
      }
    },
    methods: {
      sortTable(header) {
        if (this.sortedHeaders.includes(header)) {
          this.toggleSort(header)
        } else {
          this.sortedHeaders.push(header)
          this.doSort()
        }
      },
      toggleSort(header) {
        // 省略部分代码
      },
      doSort() {
        this.sortedItems.sort((a, b) => {
          // 省略部分代码
        })
      },
      getSortIcon(header) {
        // 省略部分代码
      },
    },
  }
</script>

Ici, nous définissons quatre fonctions de gestion d'événements, sortTable(), toggleSort(), doSort() et getSortIcon(), pour implémenter les fonctions de tri, d'inversion et d'affichage des icônes de la table.

Pour résumer, le processus de personnalisation des tableaux à l'aide de Vue est très flexible et hautement personnalisable. Grâce à la fonctionnalité de composantisation et à la mise en œuvre de liaisons de données et d'événements, nous pouvons rapidement implémenter les styles et la logique d'interaction de diverses tables.

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!