Comment implémenter les fonctions de tri de table et de pagination dans les documents Vue

Vue est un framework JavaScript populaire souvent utilisé pour développer des applications monopage (SPA). Lorsque nous devons afficher une grande quantité de données dans une application Vue, nous utilisons généralement des tableaux pour présenter les données. Le tri et la pagination des tableaux sont très importants pour permettre aux utilisateurs de parcourir plus facilement les données. Cet article expliquera comment utiliser les fonctions de tri de table et de pagination dans les applications Vue.

1. Implémenter le tri des tables

Tout d'abord, nous devons introduire une bibliothèque JavaScript appelée "lodash" dans l'application Vue. Lodash est une bibliothèque d'outils très utile qui fournit de nombreuses fonctions pratiques qui peuvent grandement simplifier notre travail de développement.

Ensuite, dans l'option "data" du composant Vue, définissez un tableau pour stocker les données que nous souhaitons présenter. Nous devons également définir une propriété pour le tri, telle que "sortKey" et "reverse", et définir leurs valeurs par défaut sur "name" et "false" respectivement.

data() {
  return {
    items: [
      { name: 'John', age: 20 },
      { name: 'Bob', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Peter', age: 35 }
    ],
    sortKey: 'name',
    reverse: false
  }
},

Ensuite, nous devons définir un événement de clic pour chaque colonne de l'en-tête afin que l'utilisateur puisse trier par colonne en cliquant sur l'en-tête. Tout d’abord, nous devons définir une méthode « sortBy » qui sera utilisée pour trier les données. Dans cette méthode, nous devons d'abord stocker le champ à trier dans l'attribut "sortKey", puis trier en fonction de l'état de l'attribut "reverse".

methods: {
  sortBy(key) {
    this.sortKey = key;
    this.reverse = !this.reverse;
    this.items.sort((a, b) => {
      let modifier = 1;
      if (this.reverse) modifier = -1;
      if (a[this.sortKey] < b[this.sortKey]) return -1 * modifier;
      if (a[this.sortKey] > b[this.sortKey]) return 1 * modifier;
      return 0;
    });
  }
},

Enfin, nous devons utiliser la directive v-on pour lier l'événement click et appeler la méthode sortBy dans chaque colonne de l'en-tête du tableau.

<th v-on:click="sortBy('name')">Name</th>
<th v-on:click="sortBy('age')">Age</th>

2. Implémenter la pagination des tableaux

Lorsque nous devons présenter une grande quantité de données, l'affichage de toutes les données dans un seul tableau peut entraîner un défilement lent de la page. Par conséquent, nous devons diviser les données en plusieurs pages et les afficher séparément. Voici comment implémenter la pagination.

Dans l'option "data" du composant Vue, nous devons définir une propriété "currentPage" pour suivre la page actuellement affichée. Et définissez un attribut "pageSize" pour définir le nombre d'éléments que contient chaque page.

data() {
  return {
    items: [
      { name: 'John', age: 20 },
      { name: 'Bob', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Peter', age: 35 }
    ],
    currentPage: 1,
    pageSize: 2
  }
},

Ensuite, nous devons définir une propriété calculée qui renverra le sous-ensemble d'éléments requis pour la page actuelle.

computed: {
  displayedItems() {
    let start = (this.currentPage - 1) * this.pageSize;
    let end = start + this.pageSize;
    return this.items.slice(start, end);
  }
},

Enfin, nous devons ajouter un composant de pagination au modèle Vue. Nous pouvons utiliser Vuetify, Bootstrap ou CSS personnalisé pour créer des composants de pagination. Ici, nous prenons comme exemple le CSS personnalisé.

<ul class="pagination">
  <li v-bind:class="{ disabled: currentPage === 1 }" v-on:click="currentPage--">
    <a>Previous</a>
  </li>
  <li v-for="pageNumber in pages" v-bind:class="{ active: currentPage === pageNumber }" v-on:click="currentPage = pageNumber">
    <a>{{ pageNumber }}</a>
  </li>
  <li v-bind:class="{ disabled: currentPage === pageCount }" v-on:click="currentPage++">
    <a>Next</a>
  </li>
</ul>

Dans le composant Vue, nous devons définir deux nouvelles propriétés calculées, "pageCount" calcule le nombre total de pages et "pages" calcule le tableau utilisé pour parcourir les numéros de page de rendu.

computed: {
  pageCount() {
    return Math.ceil(this.items.length / this.pageSize);
  },
  pages() {
    let pagesArray = [];
    for (let i = 1; i <= this.pageCount; i++) {
      pagesArray.push(i);
    }
    return pagesArray;
  }
},

De cette façon, nous avons terminé la mise en œuvre de la pagination des tables. Lorsque nous cliquons sur un numéro de page dans le composant de pagination, la propriété "currentPage" est mise à jour en conséquence et la propriété calculée "displayedItems" est utilisée pour afficher les éléments requis pour le numéro de page actuel. En bref, il n'est pas difficile d'implémenter le tri et la pagination des tables dans Vue, et cela peut être facilement réalisé en utilisant la méthode ci-dessus.

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!