Das Vue-Projekt realisiert den Paging-Effekt

Der Paging-Effekt wird zu Ihrer Information im Vue-Projekt implementiert. Der spezifische Inhalt ist wie folgt

1. Hier verwenden wir element-ui zur Implementierung. Installieren Sie es zunächst mit npm

npm ich element-ui -S

2. Globaler Import in main.js

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

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

3. Verpackungskomponenten

<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>

4. Komponenten importieren und verwenden

<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>

Klicken Sie zum Lernen des Lern-Tutorials zu vue.js bitte auf die Spezialthemen Lern-Tutorial zu vue.js-Komponenten und Lern-Tutorial zu Vue.js-Front-End-Komponenten.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Vue-Formular-Formularübermittlung + asynchrone Ajax-Anforderung + Paging-Effekt
Vue.js implementiert die Paging-Abfragefunktion
Beispielcode zum Schreiben eines Pagers mit Vue
Vue.js realisiert die Entwicklung unendlicher Lade- und Paging-Funktionen
Beispiel für die Paginierung einer Vue.js-Tabelle
VUE + SpringBoot implementiert die Paging-Funktion
Die Vue-Komponentenbibliothek ElementUI realisiert den Paging-Effekt einer Tabellenliste
So verwenden Sie die ElementUI-Paginierungskomponente Paginierung in Vue
Vue + iview realisiert Paging- und Abfragefunktionen
Kapselung der Vue+iview-Paging-Komponente
Vue implementiert Paging-Funktion

<<: Eine einfache Möglichkeit, die QT-Anwendung in eingebettetem Linux neu zu starten (basierend auf QT4.8 qws)

>>: Diagramm des Prozesses von der Deinstallation bis zur Installation von MySQL 5.7.18 yum unter Linux