Comment implémenter la pagination de table dans vue + element-js tutoriel-php.cn

Comment implémenter la pagination de table dans vue + element

亚连

Libérer： 2018-06-15 16:24:05

original

1916 Les gens l'ont consulté

Comme nous le savons tous, Element est un ensemble de bibliothèques de composants backend Vue.js, qui peuvent vous aider à développer des projets backend plus facilement et plus rapidement. L'article suivant vous présente principalement les informations pertinentes sur l'utilisation de l'élément vue + pour implémenter la pagination des tables et la recherche frontale. Les amis dans le besoin peuvent s'y référer.

Avant-propos

ElementUI est un framework frontal open source basé sur Vue et fourni par Ele.me. Il nous a aidé à encapsuler une série de. fonctionnalités Composants, tels que systèmes de grille, tableaux, formulaires, menus arborescents, notifications, etc. Pour les projets qui utilisent des interfaces de gestion backend, en particulier les projets qui n'ont pas besoin d'être compatibles avec ie8 ou ie9 ci-dessous, ElementUI est un bon choix.

De plus, la documentation d'ElementUI est très détaillée Vous pouvez vous lancer rapidement en vous référant à la démo.

Cet article présente principalement le contenu pertinent sur l'élément Vue + pour implémenter la pagination des tables et la recherche frontale. Il est partagé pour la référence et l'apprentissage de chacun. Je ne dirai pas grand-chose ci-dessous, jetons un coup d'œil à cela. introduction détaillée.

Idées de mise en œuvre

1 Il y aura beaucoup de tables dans la gestion front-end et back-end, et s'il y a trop de tables. données, la pagination est requise ;

2. Si l'interaction frontale demande au serveur pour chaque recherche, cela augmentera la pression sur le serveur. Par conséquent, si la quantité de données n'est pas très importante, les données. peut être renvoyé immédiatement et le front-end effectuera la récupération

3. Collez-en un ci-dessous la démo

Exemple de code

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

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.