Vue verwendet v-model, um den gesamten Prozess der El-Paginierungskomponenten zu kapseln

 <el-pagination @size-change="Größenänderungshandle"
            @current-change="handleCurrentChange" :current-page="Seiteninfo.Seitennummer"
            :Seitengrößen="[5, 10, 15, 20]" :Seitengröße="Seiteninfo.Seitengröße"
            layout="gesamt, Größen, zurück, Pager, weiter, Jumper" :gesamt="pageInfo.total"
            Hintergrund>
        </el-pagination>

Standard exportieren {
  Daten() {
    zurückkehren {
      formData : {
        //Abfrageinformationen queryInfo:{
          Benutzertyp: 0,
          deleteFlag: 2, // zeigt alle Typen an pagenum: 1,
          Seitengröße: 10      
        },

        // Das Benutzertyp-Auswahlfeld wählt derzeit den angezeigten Label-Wert userTypeLabel: „alle Typen“ aus,

        // Das Benutzerstatus-Auswahlfeld zeigt derzeit den ausgewählten Labelwert userStatusLabel: „alle Typen“ an.
      },
        
      // Paging-Informationen pageInfo:{
        Seitennummer: 1,
        Seitengröße: 10,
        gesamt : 0
      }
    }
  },
  Methoden: {
    // Benutzerinformationsliste abfragen queryUsers(){
      lass _this = dies;
      //console.log(diese.Seiteninfo);

      diese.formData.queryInfo.pagenum = diese.pageInfo.pagenum;
      this.formData.queryInfo.pagesize = this.pageInfo.pagesize;

      diese.instance.queryUsers(
        dies.$baseUrl,diese.formData.queryInfo
      ).dann(res => {
        //Konsole.log(res.data);
        wenn (res.data.code == dieser.global.SucessRequstCode){
          //Wenn die Abfrage erfolgreich ist_this.pageInfo.total = res.data.data.length;
          _this.userInfoList = res.data.data;
        }anders{
          Alarm (res.data.message);
        }
      }).fangen(Fehler => {
        alert('Abfrage fehlgeschlagen!');            
        konsole.log(Fehler);
      });
    },    
    // Anzahl der Elemente pro Seite ändern handleSizeChange(newSize) {
        this.pageInfo.pagesize = neue Größe;
        diese.queryUsers();
    },
    // Die aktuelle Seitenzahl ändert sich handleCurrentChange(newPage) {
        this.pageInfo.pagenum = neueSeite;
        diese.queryUsers();
    }
  }

<template lang="html">
  <div Klasse="pagination">
    <el-pagination 
      @size-change="Größenänderungsgriff" 
      @current-change="AktuelleÄnderung handhaben"
      :current-page.sync="Seiteninfo.Seitennummer"  
      :Seitengröße="Seiteninfo.Seitengröße" 
      :page-sizes="Seitengrößen"
      :total="Seiteninfo.total"
      Layout = "Gesamt, Größen, Zurück, Pager, Weiter, Jumper"
      Hintergrund >
    </el-pagination>
  </div>   
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "Paginierung",
    Modell : {
        Eigenschaft: „Seiteninfo“,
        Ereignis: „Ändern“
    },
    Requisiten: {
      //Wählen Sie die Anzahl der Elemente pro Seite pageSizes: {
        Typ: Array,
        Standard() {
          Rückkehr [5, 10, 15, 20];
        }
      },
      // Datenobjekt pageInfo an v-model gebunden: {
        Typ: Objekt,
        erforderlich:true
      }
    },
    Daten(){
      zurückkehren {            
      }
    },
    Methoden: {
      handleSizeChange(neueGröße) {
        var neuerWert={
					Seitengröße: neue Größe,
					Seitennummer: neueGröße <= this.total? 1: this.pageInfo['Seitennummer'] 
				};
        dies.$emit('ändern',Objekt.zuordnen(diese.pageInfo,neuerWert));
        dies.$emit('Paginierung');
      },
      handleCurrentChange(neueSeite) {
        dies.$emit('ändern',Objekt.zuordnen(this.pageInfo,{pagenum : newPage}));
        dies.$emit('Paginierung');
      }
    }    
  }
</Skript>

<style lang="css" scoped>
.pagination {
    Polsterung: 10px 0;
    Textausrichtung: zentriert;
}
</Stil>

  Seiteninfo:{
        Seitennummer: 1, //Nummer
        Seitengröße: 10, //Zahl
        gesamt: 0 //Anzahl
      }

Paginierung aus „@/components/Pagination.vue“ importieren

//Paging-Plugin registrieren Vue.component('pagination', pagination)

  <!-- Seitenbereich -->
        <pagination v-model="pageInfo" @pagination="queryUsers"></pagination>

Standard exportieren { 
  Daten() {
    zurückkehren {
      formData : {
        //Abfrageinformationen queryInfo:{
          Benutzertyp: 0,
          deleteFlag: 2, // zeigt alle Typen an pagenum: 1,
          Seitengröße: 10      
        },

        // Das Benutzertyp-Auswahlfeld wählt derzeit den angezeigten Label-Wert userTypeLabel: „alle Typen“ aus,

        // Das Benutzerstatus-Auswahlfeld zeigt derzeit den ausgewählten Labelwert userStatusLabel: „alle Typen“ an.
      },
        
      // Paging-Informationen pageInfo:{
        Seitennummer: 1,
        Seitengröße: 10,
        gesamt : 0
      }
    }
  },
  Methoden: {
    // Benutzerinformationsliste abfragen queryUsers(){
      lass _this = dies;
      //console.log(diese.Seiteninfo);

      diese.formData.queryInfo.pagenum = diese.pageInfo.pagenum;
      this.formData.queryInfo.pagesize = this.pageInfo.pagesize;

      diese.instance.queryUsers(
        dies.$baseUrl,diese.formData.queryInfo
      ).dann(res => {
        //Konsole.log(res.data);
        wenn (res.data.code == dieser.global.SucessRequstCode){
          //Wenn die Abfrage erfolgreich ist_this.pageInfo.total = res.data.data.length;
          _this.userInfoList = res.data.data;
        }anders{
          Alarm (res.data.message);
        }
      }).fangen(Fehler => {
        alert('Abfrage fehlgeschlagen!');            
        konsole.log(Fehler);
      });
    }
  }

:Seitengrößen=[10,20,30,50,100]