Vue -Komponenten -BootPage implementiert eine einfache Paging -Funktion

Ich habe den Artikel eine Weile nicht aktualisiert, vor allem, weil ich neue Dinge gelernt und vergessen habe, ihn zu teilen. Ich schäme mich wirklich.

Schauen Sie, ich habe einen Artikel mitten in der Nacht gepostet und ein Vue -Widget namens BootPage geteilt, den ich selbst geschrieben habe.

Wenn Sie Vue.js nicht verstehen, können Sie zu meinem vorherigen Artikel "Ein kurzes Gespräch über Vue.js" übergehen, um darüber zu erfahren.

Einführung in BootPage -Komponenten

Tatsächlich ist es keine High-End-Komponente. Im Gegenteil, es ist wirklich nur eine einfache Tischpagingkomponente. Es liegt hauptsächlich daran, dass ich in meinem letzten Projekt eine Tabelle Paging -Komponente brauche. Die vue offiziellen Komponentenbibliothek -Paginationskomponenten sind zu leistungsfähig oder nicht für mich geeignet, also habe ich selbst einen geschrieben, um damit auszukommen. Vielleicht braucht jemand wie ich eine so einfache Paging -Komponente, um einfache Paging -Funktionen zu implementieren. Ich werde es hier teilen und jeder wird die Gruben ausfüllen.

Wenn Sie High-End-Komponenten benötigen, können Sie zur offiziellen Vue-Komponentenbibliothek wechseln: https://github.com/vuejs/awesome-vue#libraries-Plugins

BOOTPAGE ist eine Tabelle Paging -Komponente, die statische Daten und Serverdaten unterstützt. Es unterstützt die Einstellung der Anzahl der Zeilen, die auf jeder Seite angezeigt werden, und die Anzahl der angezeigten Seiten. Der Stil basiert auf Bootstrap, genau wie folgt:

Online -Demonstration: https: //luozhihao.github.io/b ...

Wie man benutzt

In der .vue -Komponentendatei schreiben wir eine solche Vorlage, dh HTML -Code:

 <table> <thead> <tr> <th>id</th> <th>name</th> <th>content</th> <th>remark</th> </tr> </thead> <tbody> <ttr v-for="data in tableList"> <td v-text="data.num"></td> <td v-text="data.author"></td> <td v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4"> <div> <button v-on: click = "refresh"> refresh </button> </div> <div> <boot-page: async = "false". : lens = "lenarr": page-len = "pagelen": param = "param"> </boot-page> </div> </td> </td> </tfoot> </table>

In der <Stief-Page> -Tag bezieht sich Async darauf, ob Daten von der Serverseite erhalten werden sollen, False ist nein. Daten sind ein statisches tabellarisches Datenarray. Objektiv ist eine Reihe von Zeilen, die pro Seite angezeigt werden. Page-len ist die Anzahl der Seiten, die angezeigt werden können.

JavaScript -Code, der statische Daten verwendet, dh der Inhalt im Skript -Tag ist wie folgt:

 <Script> BootPage importieren von './Components/bootPage.vue' exportieren Standard {data () {return {lenarr: [10, 50, 100], // Anzeigelänge pro pagelen: 5, // Anzahl der Seiten anzeigen Seiten angezeigt werden: [{num: 1, Autor: Suchh ', luozh' 'DSDS'}, {num: 2, Autor: 'Luozh', Inhalt: 'Unterstützung zur Anpassung der Anzahl der pro Seite angezeigten Zeilen und der Anzahl der angezeigten Seiten. Der Stil basiert auf Bootstrap ', Bemerkung:' dsds '}, {num: 3, Autor:' Luozh ', Inhalt:' <Boot-Page> Tag Async bezieht sich darauf, dass Daten von der Serverseite von der Serverseite abgerufen werden sollen, falsch ist nein ' 'dsds'}, {num: 5, Autor: 'Luozh', Inhalt: 'Objektiv ist ein Array von Zeilen pro Seite angezeigt', Bemerkung: 'dsds'}, {num: 6, Autor: 'Luozh', Inhalt: 'Page-len ist die Anzahl der Seiten, die angezeigt werden können: Die Rückgabeparameter des Servers sind {Daten: [], page_num: 6}, wobei Daten tabellarische Daten sind und page_num die Gesamtzahl der Seiten ist, Bemerkung: 'DSDS'}, {num: 8, Autor: 'Luozh', Inhalt: 'Can Cal the $ Refs.Page.Refresh. Verwenden Sie Tablelist, wenn Sie Serverdaten verwenden: [] // Datenpost-Daten nach der Paginationskomponente}}, Komponenten: {BootPage}, Ereignisse: {// Tabellendaten, die von der Paginationskomponente zurückgegeben wurden '(Daten) {this.tablelist = data}}} </script> zurückgegeben wurden

Im Allgemeinen verwenden wir selten statische tabellarische Daten, und die meisten Anwendungsdaten werden von der Serverseite erhalten. Hier finden Sie eine Methode, um Server -Paginierungsdaten zu erhalten:

Die Komponente HTML, die Serverdaten verwendet, lautet wie folgt:

<Boot-Page V-Ref: Seite: async = "true": lens = "lenarr": url = "url": page-len = "pagelen": param = "param"> </boot-page>

wobei URL die Anforderungsadresse des Servers ist; Param ist das Parameterobjekt, das an den Server gesendet werden muss.

Der Code, den Serverdaten JavaScript verwenden, lautet wie folgt:

 <Script> BootPage importieren von './Components/bootPage.vue' exportieren Standard {data () {return {lenarr: [10, 50, 100], // Länge pro Seite Set pagelen: 5, // Anzahl der Seiten, die URL: '/Startpatchpatz anfordern können. back by the pagination component} }, methods: { refresh () { this.$refs.page.refresh() // A table refresh function is provided here} }, components: { bootPage }, events: { // The table data returned by the pagination component (here is the data returned by the server) 'data' (data) { this.tableList = data }, // Refresh the data 'aktualisieren' () {this.refresh ()}}}} </script>

HINWEIS: Zusätzlich zum an die Komponententabelle übergebenen Array -Inhalt benötigt der Server auch einen Schlüsselnamen der Gesamtzahl der Seiten mit dem Namen Page_Num

Die Parameter, mit denen die Komponente auf den Server geliefert wird, sind:

{

Aktiv: 1, // aktuelle Seitennummer

Länge: 5 // Anzahl der angezeigten pro Seite angezeigt

}

Die Parameter für die Serverrendite müssen sein:

{

Daten: [], // tabellarische Daten

Page_num: 5 // Gesamtseite der Seitenzahl

}

Komponentenquellcode

Für die Implementierung von Pagination werde ich den Quellcode hier nicht anstellen. Ich habe den gesamten Quellcode in meinen GitHub hochgeladen, und die Adresse lautet: https://github.com/luozhihao/bootpage

Lassen Sie mich Sie im Voraus erinnern: Da ich einige Stunden Zeit habe, um diese Komponente zu vertreiben, muss ich in Schreibformaten und Spezifikationen von VUE -Komponenten unzureichend gewesen sein und war nicht völlig unabhängig, also fülle ich bewusst die Grube aus. Ich werde es hier nur teilen.

Natürlich können Sie auch den Code der Komponente nach Belieben ändern, um die Verwendung Ihres Projekts zu entsprechen. Schließlich ist es immer noch ziemlich kompliziert, große und vollständige Paging -Komponenten zu implementieren.

Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.

Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.