Utilizar vue + Métodos para implementar paginación de tablas y búsqueda en la interfaz delantero de element

Prólogo

ElementUI es un framework de frontend basado en Vue lanzado por Ele.me, que ya ha encapsulado una serie de componentes funcionales, como el sistema de rejilla, la tabla, el formulario, el menú de árbol, las notificaciones, etc. Especialmente adecuado para proyectos de gestión de interfaz de backend, especialmente aquellos que no necesitan considerar la compatibilidad con ie.8、ie9A continuación, el proyecto ElementUI es una buena opción.

Además, los documentos de ElementUI están muy detallados y al seguir los demos se puede aprender rápidamente.

Este artículo principal introduce sobre vue + Se comparte la implementación de paginación de tablas y búsqueda en el frontend utilizando element, esperando que sea útil para que otros la consulten y aprendan, sin más preámbulos, veamos una introducción detallada.

Enfoque de implementación

1.En la gestión de backend del frontend hay muchas tablas, y cuando hay muchos datos en las tablas, se necesita paginación;

2.Cada vez que se interactúe en el frontend con una búsqueda, se aumentará la presión del servidor, por lo que en caso de que no haya una gran cantidad de datos, se puede devolver toda la información de una vez y hacer la búsqueda en el frontend

3.A continuación, se adjunta un demo

Ejemplo de código

<template>
<div>
 <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>
</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 función de búsqueda en el frontend necesita distinguir si se ha realizado una búsqueda, ya que los índices de los campos correspondientes son diferentes
 //Usar dos variables para recibir los parámetros de la función currentChangePage
 doFilter() {
  if (this.tableDataName == "") {
  this.$message.warning("¡La condición de búsqueda no puede estar vacía!");
  return;
  }
  this.tableDataEnd = []
  //Cada vez que se ponga manualmente los datos a cero, ya que puede haber múltiples clics en la búsqueda
  this.filterTableDataEnd=[]
  this.tableDataBegin.forEach((value, index) => {
  if(value.name){
   if(value.name.indexOf(this.tableDataName)>=0){
   this.filterTableDataEnd.push(value)
   }
  }
  });
  //Cuando los datos de la página cambien, vuelva a contar el número total de datos y la página actual
  this.currentPage=1
  this.totalItems=this.filterTableDataEnd.length
  //Renderizar la tabla, según el valor
  this.currentChangePage(this.filterTableDataEnd)
  //La inicialización de datos de la página debe determinar si se ha realizado una búsqueda
  this.flag=true
 },
 openData() {},
 handleSizeChange(val) {
  console.log(`por página ${val} elementos`);
  this.pageSize = val;
  this.handleCurrentChange(this.currentPage);
 },
 handleCurrentChange(val) {
  console.log(`Página actual: ${val}`);
  this.currentPage = val;
  //Necesita determinar si se realiza una búsqueda
  if(!this.flag){
  this.currentChangePage(this.tableDataEnd)
  }
  this.currentChangePage(this.filterTableDataEnd)  
  }
 }, //El componente tiene monitoreo automático de la página actual
 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>

Resumen

Este es el contenido completo del artículo, espero que el contenido de este artículo tenga cierta valoración de referencia para el aprendizaje o el trabajo de todos, si tienen alguna pregunta, pueden dejar comentarios para intercambiar, gracias por el apoyo a la教程 de clamor.

Declaración: El contenido de este artículo se obtiene de la red, pertenece al autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @ para denunciar y proporcionar evidencia. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)