Das Vue-Projekt realisiert den Paging-Effekt

npm ich element-ui -S

importiere ElementUI von „element-ui“
importiere 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI) //Element-UI global aufhängen

<Vorlage>
 <div Klasse="Block">
 <el-pagination
  @current-change="AktuelleÄnderung handhaben"
  :current-page="aktuelleSeite"
  :Seitengröße="6"    
  Layout = "Zurück, Pager, Weiter, Jumper"
  :gesamt="gesamt"
  :pager-count="5"
 >
 </el-pagination>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 props: ["num", "page"], //Die Gesamtzahl der übergebenen Einträge und die Seitenzahl data() {
 zurückkehren {};
 },
 berechnet: {
 aktuelleSeite: Funktion() {
  gib diese Seite zurück;
 },
 insgesamt: Funktion() {
  gib diese.Nummer zurück;
 }
 },
 Methoden: {
 handleSizeChange(Wert) {
  dies.$emit("Größenänderung", val);
 },
 handleCurrentChange(Wert) {
  dies.$emit("aktuelle-Änderung", val);
 }
 }
};
</Skript>

<Stil>
.block {
 Textausrichtung: rechts;
 /* Breite: 100 %; */
}
</Stil>

<Vorlage>
 <div Klasse="mobild">
  <div>
  <ATablePaging
   :num="Nummer"
   :page="Seite"
   @current-change="(Wert) => { 
   Seite = Wert;
   Liste();
   }"
  ></ATablePaging>
  </div>
 </div>
</Vorlage>

<Skript>
importiere ATablePaging von "../paging"; //Führe die Paging-Komponente ein export default {
 Daten() {
 zurückkehren {
  page:"", //Aktuelle Seitenzahl num: 1, //Gesamtzahl der Inhaltselemente};
 },
 Methoden: {
 Liste() {
  //Die Gesamtzahl der vom Backend zurückgegebenen Seiten ist gleich num
 },
 },
 montiert() {
 diese.nachrichten();
 },
 Komponenten:
 ATablePaging
 }
};
</Skript>

<Stilbereich>
</Stil>