Verwendung von vue + Methode zur Implementierung von Tabellen- und Suchfunktionen in der Frontend durch element

Einleitung

ElementUI ist ein auf Vue basierender Frontend-Framework, das von Ele.me für die Öffentlichkeit freigegeben wurde, und hat eine Reihe von funktionalen Komponenten wie Rastersystem, Tabelle, Formular, Menübaum, Benachrichtigung usw. bereits für uns verpackt. Besonders für Projekte, die eine Backend-Management-Oberfläche haben, insbesondere wenn keine Kompatibilität mit IE berücksichtigt werden muss.89Nachfolgendes Projekt, ElementUI ist eine gute Wahl.

Und die Dokumentation von ElementUI ist sehr ausführlich, mit dem Demo kann man schnell in die Handlung kommen.

Dieser Artikel beschreibt hauptsächlich das Thema "vue" + Element implementiert die Paginierung der Tabelle und die Frontend-Suche, die hier geteilt und zur Referenz und zum Lernen bereitgestellt werden. Viel geredet, lassen Sie uns also die detaillierte Einführung betrachten.

Implementierungsidee

1.Es gibt viele Tabellen im Frontend-Backend-Management, und wenn die Tabellen Daten zu viel haben, müssen sie paginiert werden;

2.Wenn die Frontend-Interaktion jedes Mal, wenn sie sucht, den Server anruft, erhöht dies den Druck auf den Server, daher kann man in kleinen Datenmengen die Daten einmalig zurückgeben und die Frontend macht die Suche

3.Hier ist ein Demo

Beispielcode

<template>
<div>
 <el-input v-model="tableDataName" placeholder="Bitte geben Sie den Namen ein" style="width:240px"></el-input>
 <el-button type="primary" @click="doFilter">Suchen</el-button>
 <el-button type="primary" @click="openData">Daten anzeigen</el-button>
 <el-table
 :data="tableDataEnd"
 border
 style="width: 100%">
 <el-table-column
  prop="date"
  label="Datum">
  width="180">
 </el-table-column>
 <el-table-column
  prop="name"
  label="Name">
  width="180">
 </el-table-column>
 <el-table-column
  prop="address"
  label="Adresse">
 </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: "Wang Xiaohu",
   address: "Shanghai Putuo District Jinshajiang Road" 1518 弄"
  },
  {
   date: "2016-05-02"
   name: "Wang Xiaohu",
   address: "Shanghai Putuo District Jinshajiang Road" 1517 弄"
  },
  {
   date: "2016-05-03"
   name: "Wang Erhu",
   address: "Shanghai Putuo District Jinshajiang Road" 1519 弄"
  },
  {
   date: "2016-05-04"
   name: "Wang Erhu",
   address: "Shanghai Putuo District Jinshajiang Road" 1516 弄"
  },
  {
   date: "2016-05-05"
   name: "Wang Sanhu",
   address: "Shanghai Putuo District Jinshajiang Road" 1518 弄"
  },
  {
   date: "2016-05-06"
   name: "Wang Sanhu",
   address: "Shanghai Putuo District Jinshajiang Road" 1517 弄"
  },
  {
   date: "2016-05-07"
   name: "Wang Xiaohu",
   address: "Shanghai Putuo District Jinshajiang Road" 1519 弄"
  },
  {
   date: "2016-05-08"
   name: "Wang Xiaohu",
   address: "Shanghai Putuo District Jinshajiang Road" 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: {
 //前端搜索功能需要区分是否检索,因为对应的字段的索引不同
 //用两个变量接收currentChangePage函数的参数
 doFilter() {
  if (this.tableDataName == "") {
  this.$message.warning("查询条件不能为空！");
  return;
  }
  this.tableDataEnd = []
  //每次手动将数据置空,因为会出现多次点击搜索情况
  this.filterTableDataEnd=[]
  this.tableDataBegin.forEach((value, index) => {
  if(value.name){
   if(value.name.indexOf(this.tableDataName)>=0){
   this.filterTableDataEnd.push(value)
   }
  }
  });
  //页面数据改变重新统计数据数量和当前页
  this.currentPage=1
  this.totalItems=this.filterTableDataEnd.length
  //渲染表格,根据值
  this.currentChangePage(this.filterTableDataEnd)
  //页面初始化数据需要判断是否检索过
  this.flag=true
 },
 openData() {},
 handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
  this.pageSize = val;
  this.handleCurrentChange(this.currentPage);
 },
 handleCurrentChange(val) {
  console.log(`Aktuelle Seite: ${val}`);
  this.currentPage = val;
  //Es muss geprüft werden, ob eine Suche erforderlich ist
  if(!this.flag){
  this.currentChangePage(this.tableDataEnd)
  }
  this.currentChangePage(this.filterTableDataEnd)  
  }
 }, //Komponente überwacht den aktuellen Seitenzahlen automatisch
 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>

Zusammenfassung

Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass der Inhalt dieses Artikels für Ihre Lern- oder Arbeitsaktivitäten einen gewissen Referenzwert hat. Wenn Sie Fragen haben, können Sie gerne Kommentare hinterlassen und sich austauschen. Vielen Dank für Ihre Unterstützung der Anleitung.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetnutzern freiwillig und selbstständig hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Diese Website übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige urheberrechtliche Inhalte finden, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @ beim Senden von E-Mails zur Meldung von Verstößen und stellen Sie relevante Beweise zur Verfügung. Sobald diese überprüft wurden, wird diese Website den verdächtigen Inhalten sofort löschen.)