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

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>

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

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

Oben sind die beiden Antwortfunktionen leicht zu verstehen.

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

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>

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!