Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels "
Pagination in Vue.js " von Denny Headrick.
Die Paginierung verbessert UX, indem Benutzer Daten in kleinen Blöcken oder auf Seiten visualisieren können. So kann die Vue.js-Komponente paginiert werden, sodass wir jeweils nur einen Teil unserer Daten anzeigen können.
Zuerst werde ich meinem JavaScript-Objekt Stück für Stück hinzufügen. Und dann werde ich
Vorlage zeigen
Von allen lokalen Daten benötige ich nur die Daten - die Seitenzahl.
data(){ return { pageNumber: 0
Für
Requisiten (Eigenschaften) ist die Datenübertragung obligatorisch, aber ich werde auch das
Größenargument für die maximale Anzahl von Datensätzen verwenden.
props:{ listData:{ type:Array, required:true }, size:{ type:Number, required:false, default: 10 } }
Für meine Implementierung werde ich Methoden verwenden, um zu den
vorherigen (vorherigen) und
nächsten (nächsten) Seiten zu gelangen:
methods:{ nextPage(){ this.pageNumber++; }, prevPage(){ this.pageNumber--; } }
Eine schnell berechnete berechnete Eigenschaft, um herauszufinden, wie viele Seiten es gibt:
pageCount(){ let l = this.listData.length, s = this.size;
Jetzt ist die berechnete
Eigenschaft paginnedData der Ort, an dem alles kombiniert wird. Dies sind die gefilterten Daten, die angezeigt werden.
paginatedData(){ const start = this.pageNumber * this.size, end = start + this.size; return this.listData.slice(start, end); }
Editorial : Ich habe anfangs etwas Schreckliches und Umständliches getan, um ein Array zu kopieren. Die Verwendung von
.slice ist der beste Ansatz. Danke,
Alexander Karelas .
Und unsere
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, dass die Tasten funktionieren, wenn sie nur müssen. Für die
prevPage- Schaltfläche werde ich hinzufügen:
: disabled = "pageNumber == 0"
und für die
nextPage- Schaltfläche
füge ich hinzu:
: disabled = "pageNumber> = pagecount -1"
Arbeitsdemo meiner Komponente:
Manchmal ist es schwierig, die Situation zu überschätzen, aber die Paginierung ist eine einfache Funktion, die wir unseren Benutzern ohne großen Aufwand anbieten können.
Danke fürs Lesen!
Denny Headrick ist ein USAF-Webentwickler, der seinen Job zu sehr liebt. Er entwickelt nicht nur auf verschiedenen Plattformen und Vue.js, sondern bloggt auch gelegentlich, wenn er kann. Sie können ihm auf Twitter unter @dennythecoder folgen.