Verwenden der Paginierung in Vue

Die Paginierungsfunktion verbessert das Benutzererlebnis, indem sie es Benutzern ermöglicht, Daten in kleineren Blöcken oder Seiten zu visualisieren. So erstellen Sie eine Vue.js-Komponente mit Paginierung, sodass wir jeweils nur einen Teil der Daten anzeigen können.

Ich beginne damit, unsere JavaScript-Objekte einzeln durchzugehen und dann die Vorlage anzuzeigen.

Die einzigen lokalen Daten, die ich benötige, ist die Seitenzahl.

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

Für Requisiten sind Daten erforderlich. Außerdem habe ich den Größenparameter definiert, um die maximale Datenmenge auf jeder Seite zu speichern.

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

In Methoden habe ich zwei Methoden für die nächste Seite und die vorherige Seite definiert:

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

Ich verwende den berechneten Attributwert, um zu berechnen, wie viele Seiten es gibt:

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

paginatedData besteht darin, das berechnete Attribut der gefilterten Daten abzurufen:

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

Änderung: Am Anfang habe ich .splice verwendet, um das Array zu kopieren, aber eine perfektere Möglichkeit ist die Verwendung der .slice-Methode, vielen Dank an Alexander Karelas hier.

In der Vorlage:

<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>

Ich möchte verhindern, dass der Benutzer die Schaltfläche am Anfang oder Ende drückt. Für die Schaltfläche „Vorherige Seite“ habe ich Folgendes hinzugefügt: „disabled="pageNumber=0" und „for“. Zur Schaltfläche „nextPage“ habe ich hinzugefügt: „disabled="pageNumber >= pagecount -1".

Empfohlenes Tutorial: „JS-Tutorial“

Das obige ist der detaillierte Inhalt vonVerwenden der Paginierung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!