Im Folgenden werde ich Ihnen ein Beispiel für die Verwendung von Vue und Element-UI zum Einrichten der Paginierung von Tabelleninhalten vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.
HTML-Code
Weil ich es in die Vorlage geschrieben habe, das heißt, ich habe eine neue Organisation erstellt und den Code veröffentlicht.
<el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"> </el-pagination>
Klein stellt im Code dar, ob der kleine Seitenstil verwendet werden soll
Layout stellt das Komponentenlayout dar und die Namen der Unterkomponenten werden durch Kommas getrennt
Attribut: total stellt die Gesamtzahl der Einträge dar
Ereignis: current-change wird verwendet, um die Änderungen der Seitenzahl zu überwachen, und der Inhalt ändert sich auch
Weitere Eigenschaften finden Sie in der offiziellen Element-API
http://element.eleme.io/# /zh-CN/component/pagination
Die Überwachungsmethode ist in Methoden geschrieben
methods:{
created:function(){
//加载班级的数据
var url ='http://127.0.0.1:3000/clazz/findAll';
//向后台获取数据
var vm = this;
$.getJSON(url,function(data){
vm.clazzInfo = data;
vm.total = data.length;//设置数据总数目！！！
});
},
current_change:function(currentPage){
this.currentPage = currentPage;
}
}wobei die URL das von Express im Hintergrund erstellte Gerüst ist. Die konfigurierte Route.
Registrieren Sie die in Daten verwendeten Daten
Da ich global registriere, sind Daten eine Funktion, die ein Objekt zurückgibt
data:function(){
return {
total:0,//默认数据总数
pagesize:7,//每页的数据条数
currentPage:1,//默认开始页面
}
}Daten an den Körper binden
<el-table :data="searchInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
wobei searchInfo das Array ist, aus dem ich die Hintergrunddaten erhalten habe.
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Wie gehe ich mit Axios-Abfangeinstellungen und Fehlerbehandlung um?
Verwenden Sie Axios, um die Download-Funktion über vue.js zu implementieren (ausführliches Tutorial)
Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Paging von Tabelleninhalten mithilfe von Vue und Element-UI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
