Utiliser la pagination dans Vue

La fonctionnalité de pagination améliore l'expérience utilisateur en permettant aux utilisateurs de visualiser les données dans des morceaux ou des pages plus petites. Voici comment créer un composant Vue.js avec pagination afin que nous ne puissions visualiser qu'une partie des données à la fois.

Je vais commencer par parcourir nos objets JavaScript un par un puis afficher le modèle.

Les seules données locales dont j'ai besoin sont le numéro de page.

data(){
    return {
      pageNumber: 0  // default to page 0
    }
}

Pour les props, les données sont nécessaires De plus, j'ai également défini le paramètre de taille pour enregistrer le maximum de données sur chaque page.

props:{
    listData:{
      type:Array,
      required:true
    },
    size:{
      type:Number,
      required:false,
      default: 10
    }
}

Dans les méthodes, j'ai défini deux méthodes pour la page suivante et la page précédente :

methods:{
      nextPage(){
         this.pageNumber++;
      },
      prevPage(){
        this.pageNumber--;
      }
}

J'utilise la valeur d'attribut calculée pour calculer le nombre de pages :

pageCount(){
      let l = this.listData.length,
          s = this.size;
      return Math.floor(l/s);
}

paginatedData est d'obtenir l'attribut calculé des données filtrées :

paginatedData(){
    const start = this.pageNumber * this.size,
          end = start + this.size;
     return this.listData.slice(start, end);
}

Modification : Au début j'utilisais .splice pour copier le tableau, mais un moyen plus parfait est d'utiliser la méthode .slice, merci Alexander Karelas ici.

Dans le modèle :

<div>
  <ul>
    <li v-for="p in paginatedData">
      {{p.first}} 
      {{p.last}}  
      {{p.suffix}}
    </li>
  </ul>
  <button @click="prevPage">
    Previous
  </button>
  <button @click="nextPage">
    Next
  </button>
</div>

Je souhaite empêcher l'utilisateur d'appuyer sur le bouton au début ou à la fin. Pour le bouton prevPage, j'ai ajouté : désactivé="pageNumber=0" et pour. le bouton nextPage, j'ai ajouté : désactivé="pageNumber >= pagecount -1".

Tutoriel recommandé : "Tutoriel JS"

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!