Heim > Web-Frontend > js-Tutorial > Hauptteil

Vue2.0, ElementUI implementiert das Umblättern von Tabellen

小云云
Freigeben: 2018-01-04 10:21:42
Original
2073 Leute haben es durchsucht

Dieser Artikel enthält hauptsächlich ein Beispiel dafür, wie Vue2.0 + ElementUI das Umblättern von Tabellen realisiert. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Der für die ElementUI-Tabelle erforderliche Datentyp ist ein Wörterbucharray. Ich habe Python3 verwendet, um das Backend zu schreiben. Wenn Sie also Daten aus der Datenbank abrufen, fügen Sie einfach die Zeile „cursorclass=pymysql.cursors.DictCursor“ hinzu. Nachdem ich es herausgenommen hatte, speicherte ich es in der Redis-Datenbank, um später leicht darauf zugreifen zu können. Verwenden Sie beim Abrufen einfach die Funktion eval() und übergeben Sie sie dann an das Frontend.

Platzieren Sie den Paginierungspager am Frontend. Ich verwende hier direkt den voll funktionsfähigen Pager.


<el-pagination
 @size-change="handleSizeChange" 
 @current-change="handleCurrentChange" 
 :current-page="currentPage" 
 :page-sizes="[10, 20, 50, 100]" 
 :page-size="pagesize" 
 layout="total, sizes, prev, pager, next, jumper" 
 :total="data.length"> 
</el-pagination>
Nach dem Login kopieren

Darunter: handleSizeChange ist die entsprechende Funktion, wenn sich die Seitengröße ändert, und handleCurrentChange ist die entsprechende Funktion, wenn sich currentPage ändert.

Seitengrößen sind alle wählbaren Seitengrößen. Sie können die Zahlen selbst ändern.

Layout ist eine integrierte Funktion, im Allgemeinen müssen Sie sie nicht berühren.

total ist die Gesamtzahl der Daten. Da es sich um ein Wörterbucharray handelt, können Sie die Längenmethode direkt verwenden, um die Gesamtzahl der Daten zu ermitteln.


data () { 
 return { 
 data: [], 
 currentPage:1, 
 pagesize:20, 
 
 } 
},
Nach dem Login kopieren

Anfangsseite currentPage, anfängliche Anzahl von Daten pro Seite, Seitengröße und Datendaten


 methods: { 
 handleSizeChange: function (size) { 
 this.pagesize = size; 
 }, 
 handleCurrentChange: function(currentPage){ 
 this.currentPage = currentPage; 
 } 
}
Nach dem Login kopieren

Oben sind die beiden Antwortfunktionen leicht zu verstehen.


<el-table
 :data="data.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
 stripe 
 style="width: 100%">
Nach dem Login kopieren

el-table-Tag. Es ist einfach, die Berechnung durchzuführen, damit die Seite nach dem Seitenwechsel die entsprechenden Daten anzeigt. Der Index sollte (aktuelle Seite-1)*Anzahl der Daten pro Seite bis zur aktuellen Seite*Anzahl der Daten pro Seite sein. Verwenden Sie zum Abrufen die Slice-Methode.

Streifen ist ein Tisch mit Zebramuster.


<el-table-column
 prop="id" 
 label="序号" 
 align="center"> 
</el-table-column>
Nach dem Login kopieren

Spalten-Tag. Zur Steuerung jeder Spalte können mehrere Elemente platziert werden. label ist der Name der Spalte, der in der ersten Zeile angezeigt wird. prop ist der Name eines Schlüssels in Daten.

Endergebnis.

Verwandte Empfehlungen:

Verwenden Sie VUE element-ui, um eine wiederverwendbare Tabellenkomponente zu schreiben

Über die vueElement-ui-Eingabesuche Lassen Sie uns über das Baumkomponentenelement ui

mit der Änderungsmethode

sprechen

Das obige ist der detaillierte Inhalt vonVue2.0, ElementUI implementiert das Umblättern von Tabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage