Vue implementiert Paging-Funktion

<el-pagination
     Layout = "Zurück, Pager, Weiter"
     @current-change="Seitennummer ändern"
     :current-page="Seitennummer"
     :page-size="Seitengröße"
     :gesamt="gesamt">
</el-pagination>

Daten(){
zurückkehren {
   Tabellendaten: [],
        total: 0, //Gesamtzahl pageNum: 1, //Aktuelle Seite pageSize: 15, //Anzahl der pro Seite angezeigten Seiten}
}
  montiert: Funktion () {
      this.query(); //Daten beim Laden der Seite abrufen},
    Methoden:{
       //Seitennummer wechselnchangePageNum: function (val) {
        diese.Seitennummer = Wert;
        diese.Abfrage();
      },
      //Daten über die Schnittstelle query: function () { abrufen
        var Daten = {
          Name: dieser.Name || '',
          FleetId: diese.FleetId,
          pageNum: this.pageNum, //Aktuelle Seite pageSize: this.pageSize //Abfragenummer};
        RoleManage.getRole(Daten)
        .then(res => {
          var Daten = Res;
          wenn (res.erfolg) {
            diese.tableData = Daten.Objekt.Liste;
            dies.total = Daten.Objekt.total;
            dieser.name = '';
          } anders {
            this.$message('Abfrage fehlgeschlagen');
          }
        }).catch(err => {
          // Ungewöhnliche Situation console.log(err);
        });
      },
   
      }

//Planung - Systemadressbuch-Paging dispatchCourentPage: 1,
        //Planung - Systemadressbuch aktuell ausgewähltes Tag markieren dispatchCourentIndex: 1,
        //Planungssystem Adressbuch weitere Markierungselemente: Gruppen-ID
        dispatchMorecommandGroupId: '',
        VersandTotlePage: 0,
//Vorherige Seite handleLastPage() {
        wenn (this.dispatchCourentPage === 1) return;
        this.dispatchCourentPage -= 1;
        let index = this.dispatchCourentIndex;
        wenn (this.dispatchMorecommandGroupId != '') {
          Dies.queryBookMoreBygroupId(dies.dispatchMorecommandGroupId);
        } anders {
          dieses.queryBookmember(index);
        }
      },
//Nächste Seite handleNextPage() {
   wenn (diese.dispatchCourentPage === diese.dispatchTotlePage) return;
   diese.dispatchCourentPage += 1;
   let index = this.dispatchCourentIndex;
   wenn (this.dispatchMorecommandGroupId != '') {
     Dies.queryBookMoreBygroupId(dies.dispatchMorecommandGroupId);
   } anders {
     dieses.queryBookmember(index);
   }

 }

berechnet: {
      limitData() {
        let data = [...this.table1Datas];
        Daten zurückgeben;
      },
            // Da die Gesamtzahl der Seiten dynamisch berechnet werden muss, ist auch eine berechnete Eigenschaft erforderlich, um die endgültigen Daten an die Tabelle zurückzugeben
      DatenMitSeite() {
        const data = diese.limitData;
        const start = dies.aktuell * dies.Größe - dies.Größe;
        const end = start + diese.Größe;
        zurückgeben [...Daten].Slice(Start, Ende);
      },
  }

/**
   *Berechnen Sie die Seitenanzahl basierend auf der Anzahl der Datenelemente und der Anzahl der Datenelemente pro Seite* Gesamtanzahl der Datenelemente* Grenzanzahl der Datenelemente pro Seite*/
 Seitenanzahl(Gesamtzahl, Grenze) {
     Gesamtanzahl zurückgeben > 0 ? ((Gesamtanzahl < Grenzwert) ? 1 : ((Gesamtanzahl % Grenzwert)
        ? (parseInt(Gesamtzahl / Grenze) + 1)
         : (Gesamtzahl / Limit))) : 0;
 },

/**
   * Gesamtzahl der Seiten für die Seitennummerierung* Gesamtzahl der Datensätze: totalRecord
   * Maximale Anzahl Datensätze pro Seite: maxResult
 */
 Funktion Seitenanzahl() {
     Gesamtseite = (Gesamtdatensatz + max. Ergebnis -1) / max. Ergebnis;
}

Gesamtseite = Math.floor((Gesamtdatensatz +maxResult -1) /maxResult );