So implementieren Sie Tabellenpaging in Vue + Element

Wie wir alle wissen, handelt es sich bei Element um eine Reihe von Vue.js-Backend-Komponentenbibliotheken, mit denen Sie Backend-Projekte einfacher und schneller entwickeln können. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von Vue + Element zur Implementierung von Tabellenpaging und Front-End-Suche ein. Lassen Sie uns gemeinsam einen Blick darauf werfen.

Vorwort

ElementUI ist ein Vue-basiertes Front-End-Framework von Ele.me. Es hat uns dabei geholfen, eine Reihe von zu kapseln Funktionalitäten Komponenten wie Rastersysteme, Tabellen, Formulare, Baummenüs, Benachrichtigungen usw. Für Projekte, die sich mit Backend-Verwaltungsschnittstellen befassen, insbesondere Projekte, die nicht mit ie8 oder ie9 unten kompatibel sein müssen, ist ElementUI eine gute Wahl.

Außerdem ist die Dokumentation von ElementUI sehr ausführlich. Sie können schnell loslegen, indem Sie sich die Demo ansehen.

In diesem Artikel werden hauptsächlich die relevanten Inhalte zum Vue + -Element zur Implementierung von Tabellenpaging und Front-End-Suche vorgestellt. Ich werde im Folgenden nicht viel sagen ausführliche Einführung.

Implementierungsideen

1. Es wird viele Tabellen im Front-End- und Back-End-Management geben, und wenn es zu viele Tabellen gibt Daten, Paging ist erforderlich;

2. Wenn die Front-End-Interaktion den Server bei jeder Suche anfordert, erhöht sich der Druck auf den Server. Wenn die Datenmenge daher nicht sehr groß ist kann sofort zurückgegeben werden und das Frontend übernimmt den Abruf

3. Fügen Sie unten eine Demo ein

Beispielcode

<template>
<p>
 <el-input v-model="tableDataName" placeholder="请输入姓名" style="width:240px"></el-input>
 <el-button type="primary" @click="doFilter">搜索</el-button>
 <el-button type="primary" @click="openData">展示数据</el-button>
 <el-table
 :data="tableDataEnd"
 border
 style="width: 100%">
 <el-table-column
  prop="date"
  label="日期"
  width="180">
 </el-table-column>
 <el-table-column
  prop="name"
  label="姓名"
  width="180">
 </el-table-column>
 <el-table-column
  prop="address"
  label="地址">
 </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>
</p>
</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: {
 //前端搜索功能需要区分是否检索,因为对应的字段的索引不同
 //用两个变量接收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(`当前页: ${val}`);
  this.currentPage = val;
  //需要判断是否检索
  if(!this.flag){
  this.currentChangePage(this.tableDataEnd)
  }else{
  this.currentChangePage(this.filterTableDataEnd)  
  }
 }, //组件自带监控当前页码
 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>

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So verwenden Sie Vue.set(), um eine dynamische Datenantwort zu implementieren

So implementieren Sie die dynamische Bindung von Bildern in Vue Und Daten geben den Bildpfad zurück

So ändern Sie statische Bilder dynamisch und fordern Netzwerkbilder in Vue an

So verwenden Sie das Browser-Plugin -in Batarang in Angular

Überwachungsverwendung in Vue vorladen

So implementieren Sie Offset und einheitliche Animation in JS

So implementieren Sie die Pasteboard-Kopierfunktion mit JS

So implementieren Sie die Funktion zum Konvertieren von HTML in PDF in JS

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Tabellenpaging in Vue + Element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!