In einem Artikel erfahren Sie, wie Sie Vue-Frontend-Paging und Backend-Paging implementieren.

 <Text>
  <div id="app">
    <table class="Tabelle, mit Tabellenrand, Tabelle, kondensiert">
      <tr Klasse="bg-primary">
        <th class="text-center">Sortieren</th>
        <th class="text-center">Benutzername</th>
        <th class="text-center">Geschlecht des Benutzers</th>
        <th class="text-center">Stadt</th>
      </tr>
      <tr class="text-center aktiv" v-for="(v,i) in Liste" :key="i">
        <td>{{Anzahl(i)}}</td>
        <!-- <td>{{params.pagesize}}</td> -->
        <td>{{v.name}}</td>
        <td>{{v.sex}}</td>
        <td>{{v.Adresse}}</td>
      </tr>       
    </Tabelle>
    <nav aria-label="Seitennavigation" style="text-align: center;">
      <ul Klasse="pagination">
        <!-- Vorherige Seite -->
        <li @click="prePage()" :class="{'disabled':params.page == 1}">
          <a aria-label="Zurück">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li :class="{'active': params.page == page}" v-for="(page,index) in pages" :key="index" @click="aktuelleSeite(page)">
          <a style="cursor: pointer;">
            {{Seite}}
          </a>
        </li>
        <!-- Nächste Seite -->
        <li :class="{'disabled':params.page == totalPage}" @click="next()">
          <a aria-label="Weiter">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</body>

fenster.onload = Funktion () {
  // Es ist nur eine Anfrage (Triggerereignis) innerhalb von 1 Sekunde zulässig (mehrere Klicks sind zulässig)
  neuer Vue({
    el: '#app',
    Daten: {
      Parameter: {
        Seite:1,
        Seitengröße: 20,
        Name:''
      },
      Liste: [],
      total:0, //Gesamtzahl der Einträge totalPage:0, //Gesamtzahl der Seiten flag: false,
    },
    erstellt() {
      dies.getData()
    },
    berechnet: {
      Seiten() {
        lassen Sie totalPage = diese.totalPage;
        let Seite = diese.params.Seite;
        // Die Gesamtzahl der Seiten ist kleiner als 10, if(totalPage < 10) return totalPage;
        // Wenn die Gesamtzahl der Seiten größer als 10 ist, füge Auslassungspunkte hinzu if (page <= 5) { // Die ersten fünf Seiten // (1) Wenn die Seitenzahl kleiner als 5 ist, werden links sechs Seiten angezeigt return [1,2,3,4,5,6,'...',totalPage]
        } sonst wenn (Seite >= Gesamtseite - 5) { // Die nächsten fünf Seiten console.log("Trigger")
          // (2) Wenn die Seitenzahl größer als die Gesamtzahl der Seiten - 5 ist, werden rechts sechs Rückgaben angezeigt: [1,'...',totalPage-5,totalPage-4,totalPage-3,totalPage-2,totalPage-1,totalPage]
        } else { // Die mittleren fünf Seiten // (3) Die Seitenzahl liegt zwischen 5-(totalPage-5). Das linke Intervall kann nicht kleiner als 5 und das rechte Intervall nicht größer als die Gesamtseitenzahl totalPage sein. Beachten Sie, dass die aktuelle Seitenzahl links nicht kleiner als 1 und die aktuelle Seitenzahl rechts nicht größer als die Gesamtseitenzahl sein kann return [1,'...',page-1,page,page+1,page+2,page+3,'...',totalPage]
        }
      },
      Zahl() {
        let { Seitengröße, Seite} = this.params
        // (1-1) * 10 + 10 + 0 + 1 = 1;
        // (2-1) * 10 + 10 + 0 + 1 = 11 
        // Erste Seite = (aktuelle Seite - 1) * Anzahl der Einträge pro Seite + Indexwert + 1. Stellen Sie sicher, dass sie bei 1 beginnt. return i => (Seite - 1) * Seitengröße + i + 1 // (aktuelle Seite - 1 * Anzahl der Einträge pro Seite) + Indexwert + 1
      }
    },
    Methoden: {
      getData() {
        wenn(diese.flagge) return;
        dieses.flag = wahr;
        // Folgendes entspricht einem Timer axios.get('http://localhost:3000/user/listpage',{params:this.params}).then(res => {
          Konsole.log('res',res.data.users)
          let { total, Benutzer } = res.data.users;
          dies.gesamt = gesamt;
          this.totalPage = Math.ceil( this.total / this.params.pagesize);
          this.list = Benutzer
          diese.flagge = falsch;
        })
      },
      aktuelleSeite(Seite) {
        wenn(Seite == '...') zurückgeben 
        wenn(diese.flagge) return;
        this.params.page = Seite;
        dies.getData()
      },
      vorSeite() {
        // wenn (this.params.page == '...') zurückgeben 
        wenn (diese.params.seite > 1) {
          wenn(diese.flagge) return;
          --diese.params.seite;
          console.log('Seite',diese.params.Seite)
          dies.getData()
        }
      },
      nächste() {
        // wenn (this.params.page == '...') zurückgeben 
        wenn(diese.flagge) return;
        console.log("Ausführung", this.totalPage)
        wenn(diese.params.seite < diese.gesamtseite) {
          ++diese.params.seite;
          console.log('Seite',diese.params.Seite)
          dies.getData()
        }
      },
     } 
  })
}