So implementieren Sie das Paging von Tabelleninhalten mithilfe von Vue und Element-UI

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)

Lösen Sie das Kompatibilitätsproblem von Axios unter dh spezifisch perfekt Lösung Die Schritte sind wie folgt

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!