Comment utiliser Vue pour implémenter la pagination et le tri des tables ?

Vue.js est un framework JavaScript progressif qui aide les développeurs à créer des applications monopage de haute qualité. À mesure que le développement front-end devient progressivement une technologie courante, les tables sont l'un des composants que les développeurs doivent souvent utiliser dans ce domaine. La quantité de données dans un tableau peut être très importante, nous devons donc utiliser la pagination et le tri pour afficher, gérer et traiter les données facilement et rapidement. Cet article présentera en détail comment utiliser Vue pour implémenter la pagination et le tri des tables.

1. Ajouter une pagination au tableau

Pour ajouter une pagination au tableau, nous devons utiliser Vue.js et quelques autres bibliothèques.

Tout d'abord, vous devez vous assurer que Vue.js est installé, qui peut être installé à l'aide de la commande suivante :

npm install vue

Ensuite, nous utiliserons une bibliothèque appelée vuejs-paginate. Cette bibliothèque est un composant Vue.js léger qui aide les développeurs à ajouter rapidement des contrôles de pagination.

De même, nous devons également installer la bibliothèque à l'aide de la commande suivante :

npm install vuejs-paginate

Après avoir installé la bibliothèque ci-dessus, nous devons effectuer l'opération d'importation dans le code :

import Vue from 'vue';
import Paginate from 'vuejs-paginate';

Maintenant, nous pouvons ajouter un exemple d'utilisation de Paginator dans Vue composant :

<template>
  <div>
    <table>
      <!-- 这里是表格头 -->
    </table>
    <paginate
      v-model="currentPage"
      :page-count="pageCount"
      :click-handler="pageClick"
      prev-text="上一页"
      next-text="下一页"
      :container-class="'pagination'"
      :page-class="'page-item'"
      :prev-class="'page-item'"
      :next-class="'page-item'"
      :page-link-class="'page-link'"
      :prev-link-class="'page-link'"
      :next-link-class="'page-link'"
      :disable-next="currentPage === pageCount"
      :disable-prev="currentPage === 1"
      :always-show-prev-next="true"
    />
  </div>
</template>

Ce code définit une balise table et ajoute une balise paginate en dessous. La balise paginate contient des boutons pour la page précédente et la page suivante. Nous avons également défini certaines propriétés telles que la définition du nom currentPage sur currentPage, l'utilisation de la fonction pageClick pour gérer les événements de clic sur la page et la spécification du nombre total de pages via la propriété pageCount.

2. Ajouter un tri au tableau

Avant d'ajouter un tri au tableau, nous devons nous assurer que les éléments de données du tableau sont des objets contenus dans un tableau, par exemple :

[
  {
    id: 1,
    name: '第1项'
  },
  {
    id: 2,
    name: '第2项'
  },
  {
    id: 3,
    name: '第3项'
  }
]

Le tri est nécessaire dans de nombreux scénarios, comme dans Dans une application backend d'administrateur, les administrateurs doivent être capables de trier les utilisateurs en fonction de différents attributs d'éléments de données afin de trouver rapidement les données requises.

Pour ajouter un tri au tableau, nous pouvons utiliser Vue.js et une bibliothèque JavaScript appelée lodash. Sous Linux ou macOS, vous pouvez installer lodash à l'aide de la commande suivante :

npm install lodash

Si vous obtenez des erreurs dans l'environnement de développement, essayez d'installer à l'aide de la commande suivante :

npm install --save-dev lodash

La bibliothèque Lodash fournit de nombreuses fonctions utiles et est très adaptée à Utilisé dans les applications Vue.js. Dans cet exemple, nous devons utiliser la fonction orderBy de lodash. Dans le composant Vue, la fonction peut être importée et appelée en utilisant le code suivant :

import Vue from 'vue'
import _ from 'lodash'

export default {
  name: 'table-component',

  data () {
    return {
      tableData: [
        { id: 1, name: "John Doe", age: 32, email: "john.doe@example.com" },
        { id: 2, name: "Jane Doe", age: 30, email: "jane.doe@example.com" },
        { id: 3, name: "Mark Johnson", age: 25, email: "mark.johnson@example.com" },
        { id: 4, name: "Larry Smith", age: 45, email: "larry.smith@example.com" },
        { id: 5, name: "Robert Williams", age: 38, email: "robert.williams@example.com" },
        { id: 6, name: "David Brown", age: 26, email: "david.brown@example.com" },
        { id: 7, name: "Sarah Davis", age: 27, email: "sarah.davis@example.com" },
        { id: 8, name: "Julie Robinson", age: 35, email: "julie.robinson@example.com" }
      ],
      columns: ['id', 'name', 'age', 'email'],
      sortOrder: {
        column: 'id',
        order: 'asc'
      }
    }
  },

  methods: {
    sortTableData (column) {
      if (this.sortOrder.column === column) {
        this.sortOrder.order = this.sortOrder.order === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortOrder.column = column
        this.sortOrder.order = 'asc'
      }

      this.tableData = _.orderBy(this.tableData, this.sortOrder.column, this.sortOrder.order)
    }
  },

  mounted () {
    this.tableData = _.orderBy(this.tableData, this.sortOrder.column, this.sortOrder.order)
  }
}

Dans cet exemple, nous avons tableData contenant les données de la table et le tableau columns contenant tous les noms de colonnes. Nous avons également un objet sortOrder qui contient l'ordre de tri actuel appliqué aux données de la table. La fonction selectTableSort est notre gestionnaire de tri qui trie selon un en-tête de colonne spécifique lorsque l'utilisateur clique sur cette colonne.

Nous utilisons la fonction orderBy de lodash pour trier le tableau tableData. Le premier paramètre de la fonction est le tableau de la tranche à trier, le deuxième paramètre est le nom du champ à utiliser pour le tri et le troisième paramètre spécifie l'ordre de tri (croissant ou décroissant).

Enfin, nous utilisons this.sortTableData('id') pour appeler la méthode sortTableData dans la méthode pour trier initialement les données de la table par la colonne ID.

Résumé

Dans cet article, nous avons présenté en détail comment utiliser Vue.js pour implémenter la pagination et le tri des tables. En utilisant la bibliothèque vuejs-paginate, nous pouvons facilement ajouter une fonctionnalité de pagination. Dans le même temps, en utilisant la fonction orderBy de la bibliothèque lodash, nous pouvons rapidement ajouter une fonctionnalité de tri au tableau.

Table est un composant commun dans le développement de Vue.js. Que vous travailliez en tant que développeur front-end ou développeur full-stack, la maîtrise de ces compétences vous permettra de traiter et de gérer plus facilement les données et de créer rapidement des applications de haute qualité.

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!