Metodo di implementazione della paginazione della tabella e della ricerca front-end utilizzando vue + element

Introduzione

ElementUI è un framework frontend open source di Ele.me basato su Vue, che ha già encapsulato una serie di componenti funzionali, come il sistema di griglia, la tabella, il modulo, il menu abero, le notifiche, ecc. Per i progetti di gestione delle interfacce di backend, specialmente per i progetti che non devono considerare la compatibilità con ie8, ie9 e versioni inferiori, ElementUI è una buona scelta.

Inoltre, la documentazione di ElementUI è molto dettagliata e, seguendo il demo, è possibile iniziare rapidamente.

Questo articolo introduce principalmente il contenuto relativo alla realizzazione di paginazione delle tabelle e ricerca in frontend utilizzando vue + element, condivide questo per la riferimento e l'apprendimento, non ci saranno molte parole, vediamo insieme la presentazione dettagliata.

Percorso di implementazione

1. Nella gestione backend del frontend ci sono molte tabelle, e quando i dati delle tabelle sono troppi è necessario effettuare la paginazione;

2. Ogni ricerca in interfaccia utente che richiede il server aumenta la pressione sul server, quindi in presenza di una quantità di dati non molto elevata, possiamo restituire i dati in una volta sola e fare la ricerca in frontend

3. Di seguito, aggiungiamo un demo

Esempio di codice

<template>
<div>
 <el-input v-model="tableDataName" placeholder="Inserisci il nome" style="larghezza:240px"></el-input>
 <el-button type="primary" @click="cerca">Cerca</el-button>
 <el-button type="primary" @click="apriDati">Mostra dati</el-button>
 <el-table>
 :data="tableDataEnd"
 bordo
 style="larghezza: 100%">
 <el-table-column
  prop="date"
  label="data"
  width="180">
 </el-table-column>
 <el-table-column
  prop="name"
  label="nome">
  width="180">
 </el-table-column>
 <el-table-column
  prop="address"
  label="indirizzo">
 </el-table-column>
 </el-table>
 <el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[1, 2, 3, 4]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="totalItems">
 </el-pagination>
</div>
</template>
<script>
export default {
 data() {
 return {
  tableDataBegin: [
  {
   date: "2016-05-01",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1518 弄"
  }
  {
   date: "2016-05-02",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1517 弄"
  }
  {
   date: "2016-05-03",
   name: "王二虎",
   address: "上海市普陀区金沙江路 1519 弄"
  }
  {
   date: "2016-05-04",
   name: "王二虎",
   address: "上海市普陀区金沙江路 1516 弄"
  }
  {
   date: "2016-05-05",
   name: "王三虎",
   address: "上海市普陀区金沙江路 1518 弄"
  }
  {
   date: "2016-05-06",
   name: "王三虎",
   address: "上海市普陀区金沙江路 1517 弄"
  }
  {
   date: "2016-05-07",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1519 弄"
  }
  {
   date: "2016-05-08",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1516 弄"
  }
  ],
  tableDataName: "",
  tableDataEnd: [],
  currentPage: 4,
  pageSize: 2,
  totalItems: 0,
  filterTableDataEnd:[],
  flag:false
 };
 }
 created() {
 this.totalItems = this.tableDataBegin.length;
 if (this.totalItems > this.pageSize) {
  for (let index = 0; index < this.pageSize; index++) {
  this.tableDataEnd.push(this.tableDataBegin[index]);
  }
 } else {
  this.tableDataEnd = this.tableDataBegin;
 }
 }
 methods: {
 //La funzione di ricerca前端 deve distinguere se è stata effettuata una ricerca, poiché l'indice del campo corrispondente è diverso
 //Usare due variabili per ricevere i parametri della funzione currentChangePage
 doFilter() {
  if (this.tableDataName == "") {
  this.$message.warning("Le condizioni di ricerca non possono essere vuote!");
  return;
  }
  this.tableDataEnd = []
  //Ogni volta che si imposta manualmente i dati a vuoto, perché possono verificarsi più clic di ricerca
  this.filterTableDataEnd=[]
  this.tableDataBegin.forEach((value, index) => {
  if(value.name){
   if(value.name.indexOf(this.tableDataName)>=0){
   this.filterTableDataEnd.push(value)
   }
  }
  });
  //Quando i dati della pagina cambiano, ricontrolla il numero di dati totali e la pagina corrente
  this.currentPage=1
  this.totalItems=this.filterTableDataEnd.length
  //Rendere la tabella, in base al valore
  this.currentChangePage(this.filterTableDataEnd)
  //I dati di inizializzazione della pagina devono determinare se è stata effettuata una ricerca
  this.flag=true
 }
 openData() {},
 handleSizeChange(val) {
  console.log(`Ogni pagina ${val} riga`;);
  this.pageSize = val;
  this.handleCurrentChange(this.currentPage);
 }
 handleCurrentChange(val) {
  console.log(`Pagina corrente: ${val}`);
  this.currentPage = val;
  //Bisogna determinare se si deve cercare
  if(!this.flag){
  this.currentChangePage(this.tableDataEnd)
  } else {
  this.currentChangePage(this.filterTableDataEnd)  
  }
 }, //Monitoraggio automatico del numero di pagina del componente
 currentChangePage(list) {
  let from = (this.currentPage - 1) * this.pageSize;
  let to = this.currentPage * this.pageSize;
  this.tableDataEnd = [];
  for (; from < to; from++) {
  if (list[from]) {
   this.tableDataEnd.push(list[from]);
  }
  }
 }
 }
};
</script>

Conclusione

Questo è tutto il contenuto dell'articolo, speriamo che il contenuto di questo articolo abbia un valore di riferimento per la tua apprendimento o lavoro. Se hai domande, puoi lasciare un messaggio per discuterlo, grazie per il supporto della guida a urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il diritto d'autore spetta ai rispettivi proprietari, il contenuto è stato contribuito volontariamente dagli utenti di Internet e caricato autonomamente, il sito web non detiene i diritti di proprietà, non è stato elaborato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito web rimuoverà immediatamente il contenuto sospetto di violazione del copyright.