Die Vue-Komponentenbibliothek ElementUI realisiert den Paging-Effekt einer Tabellenliste

<!--Tabelle-->
<div Klasse="formTable" id="formTable">
<el-Tabelle
  ref="Tabelle"
  :data="apprItemData"
  :header-cell-style="Kopfklasse"
         Zeilenschlüssel = "Element genehmigen"
         :tree-props="{Kinder: 'Kinder'}"
         Höhe="420"
  Grenze>
 <el-table-column
   Typ="Auswahl"
   Breite="55">
 </el-Tabellenspalte>
 <el-table-column
   label="Seriennummer"
   Breite="60"
   ausrichten="zentrieren">
  <template slot-scope="scope">{{scope.$index+1}}</template>
 </el-Tabellenspalte>
 <el-table-column
   prop="Artikelcode"
   label="Kodierung">
 </el-Tabellenspalte>
 <el-table-column
   prop="Genehmigungsname"
   label="Artikelname">
 </el-Tabellenspalte>
</el-Tabelle>
</div>
<!--Tabellenpaginierung-->
<div Klasse="pagination">
 <el-pagination
   Hintergrund
   @size-change="Größenänderungsgriff"
   @current-change="AktuelleÄnderung handhaben"
   :Seitengrößen="[5,10, 15, 20, 25]"
   :page-size="Seitengröße"
   Layout = "Gesamt, Größen, Zurück, Pager, Weiter, Jumper"
   :total="Gesamtzeile">
 </el-pagination>
</div>

<Skripttyp="text/babel">
 var vm = neuer Vue({
     el: '#app',
     Daten:{
         apprItemData: [],
         currentPage: 1, //Aktuelle Seite totalRow: 0, //Gesamtzahl der Seiten pageSize: 10 //Aktuelle Anzahl der angezeigten Elemente},
     berechnet: {},
     betrachten: {},
     erstellt() {},
     montiert() {
         dies.loadItemData();
},
     Methoden: {
         // Informationen laden loadItemData () {
             var Seitengröße = diese.Seitengröße;
             var aktuelleSeite = diese.aktuelleSeite;
             console.log("Seitengröße:"+Seitengröße+",aktuelleSeite:"+aktuelleSeite);
 //Debugger;
 var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage;
             $.ajax({
                 Typ: "get",
                 URL:geturl,
                 Inhaltstyp: "application/json; Zeichensatz=utf-8",
                 Erfolg: Funktion (Daten) {
                     //Debugger;
                     Konsole.log("totalRow:"+data.total);
                     vm.apprItemData = Daten.Zeilen;
                     vm.totalRow = Zahl(Daten.total);
                 },
                 Fehler: Funktion(e) {
                     console.log("Fehler beim Laden der Daten:",e);
                 }
             })
         }
         // Header-Stileinstellungen headClass() {
             gibt „Textausrichtung: Mitte; Hintergrund: #F7F7F7; Farbe: #1C1C1D;“ zurück.
         },
         //Seitenzahl ändern handleSizeChange(val) {
             diese.Seitengröße = Wert;
             dies.loadItemData();
         },
         //Aktuelle Seitenänderung handleCurrentChange(val) {
             diese.aktuelleSeite = Wert;
             dies.loadItemData();
         }
     }
 });
</Skript>