Beispiel für die Implementierung einer Paging-Funktion im Vue-Backend-Verwaltungssystem

        <!-- Seitennummerierung -->
        <el-pagination
          @size-change="Größenänderungsgriff"
          @current-change="AktuelleÄnderung handhaben"
          :aktuelle-Seite="queryInfo.pagenum"
          :Seitengrößen="[2, 5, 10, 15]"
          :Seitengröße="queryInfo.Seitengröße"
          Layout = "Gesamt, Größen, Zurück, Pager, Weiter, Jumper"
          :gesamt="gesamt"
        >
        </el-pagination>

    Daten() {
      zurückkehren {
        //Anforderungsparameter queryInfo: {
          Typ: 3,
          //Aktuelle Seitenzahl pagenum: 1,
          //Anzahl der angezeigten Seiten angeben Seitengröße: 5,
        },
        Warenliste: [],
        //Gesamtdaten gesamt: 0,
      }
    }
 
  Methoden: {
      //Produktklassifizierungsdaten abrufen async getGoodsCate() {
        const { data: res } = warte hierauf.$http.get("categories", {
          Parameter: this.queryInfo,
        })
        wenn (res.meta.status !== 200) {
          this.$message.error("Parameter konnten nicht abgerufen werden")
        }
        dies.total = res.data.total
        diese.Warenliste = res.Daten.Ergebnis
        //console.log(diese.Warenliste)
      },
      //Überwachen Sie die Anzahl der Einträge pro Seite handleSizeChange(pagesize) {
        // console.log(`${val} Elemente pro Seite`)
        this.queryInfo.pagesize = Seitengröße
        dies.getGoodsCate()
      },
      //Überwachen Sie die aktuelle Seitenzahl handleCurrentChange(pageNum) {
        this.queryInfo.pagenum = Seitennummer
        dies.getGoodsCate()
      },
    },