So verwenden Sie die ElementUI-Paginierungskomponente Paginierung in Vue

<div Klasse="pagination">
    <el-pagination
      Hintergrund
      Layout = "Gesamt, Größen, Zurück, Pager, Weiter, Jumper"
      :current-page="Tabellenseite.Seitennummer"
      :Seitengröße="Tabellenseite.Seitengröße"
      :page-sizes="Seitengrößen"
      :total="Tabellenseite.total"
      @size-change="Größenänderungsgriff"
      @current-change="Seitenänderungshandle"
    />
</div>

Daten() {
    zurückkehren {
      Tabellenseite: {
        pageNum: 1, // Seitenzahl pageSize: 10, // Anzahl der Datensätze pro Seite total: 0 // Gesamtzahl der Datensätze },
      Seitengrößen: [10, 20, 30]
    }
  },
  Methoden: {
    handleSeitenänderung(aktuelleSeite) {
      diese.Tabellenseite.Seitennummer = aktuelleSeite
      // Daten hier aktualisieren},
    handleSizeChange(Seitengröße) {
      this.tablePage.pageSize = Seitengröße
      // Daten hier aktualisieren}
  }

// Daten holen getData() {
      let param = {
        Seitennummer: diese.Tabellenseite.Seitennummer,
        Seitengröße: this.tablePage.pageSize
      }
      // Backend-Schnittstelle anfordern Funktion getDataApi(param, { loading: true }).then(res => {
        //Hintergrunddaten zurückgeben this.list = res.data.list
        diese.tablePage.total = res.data.total
      })
    },

/**
     * Verarbeitung der Seitennummerierungsdaten * @param data [Array] Zu paginierende Daten * @param num [Zahl] Aktuelle Seite * @param size [Zahl] Anzahl der pro Seite anzuzeigenden Elemente */
    getList(Daten, Anzahl, Größe) {
      Liste, Gesamt, Start, Ende, istErstes, istLetztes
      Gesamt = Datenlänge
      isFirst = Gesamt < Größe
      isLast = Math.ceil(Gesamt / Größe) === Num
      Start = (Zahl - 1) * Größe
      Ende = istErstes || istLetztes ? Start + (Gesamtgröße %) : Start + Größe
      Liste = Daten.Slice(Start, Ende)
      Liste.fürJedes((Element, Index) => {
        item.seq = Index + Start
      })
      Rückgabeliste
    }
    /**
     * Verarbeitung der Seitennummerierungsdaten * @param data [Array] Zu paginierende Daten * @param num [Zahl] Aktuelle Seite * @param size [Zahl] Anzahl der pro Seite anzuzeigenden Elemente */
    getList(Daten, Anzahl, Größe) {
      Liste starten, beenden
      Start = (Zahl - 1) * Größe
      Ende = Start + Größe
      Liste = Daten.Filter((Element, Index) => {
        Rückgabeindex >= Start und Index < Ende
      })
      Liste.fürJedes((Element, Index) => {
        item.seq = Index + Start
      })
      Rückgabeliste
}