码迷,mamicode.com
首页 > 其他好文 > 详细

基于element-ui实现的同步分页

时间:2020-02-07 14:35:09      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:修改   alc   底部   mic   image   根据   bsp   现在   out   

在后台管理系统中,经常会用到表格的展示。使用vue+element-UI进行后台页面开发时,自己目前常用的数据展示方法是使用element-UI中的el-table和el-pagination两个组件进行实现。大多数情况下由于数据比较多,底部的分页往往是异步的,或者说分页组件el-pagination相当于一个查询条件,前端进行接口请求的时候,除了一些基本的请求参数外,还会带上当前的页数和一页显示的数据条数这两个参数,el-table把接收到的数据展示出来即可。不过有时如果遇到已知数据并没有特别多,但是又不适合一页展示完的情况的话,可以使用同步分页的方法进行解决。

 

现在假设有这样一个需求,有四条数据需要展示,还需要分页,并且可以改变一页展示的数据条数。

 

html代码(简化)如下:

 1 <div style="width: 800px; margin: 20px auto;">
 2  <el-table :data="renderData" border style="width: 100%">
 3   <el-table-column prop="date" label="日期" width="180"></el-table-column>
 4    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
 5    <el-table-column prop="address" label="地址" width="180"></el-table-column>
 6  </el-table>
 7  <el-pagination
 8   @size-change="handleSizeChange"
 9   @current-change="handleCurrentChange"
10   :current-page="currentPage"
11   :page-sizes="[1, 2, 3, 4]"
12   :page-size="pageSize"
13   layout="total, sizes, prev, pager, next, jumper"
14   :total="totalCount">
15  </el-pagination>
16 </div>

 

js代码中,data的数据为:

 1 data() {
 2  return {
 3   tableData: [
 4    { date: ‘2016-05-01‘, name: ‘王小虎‘, address: ‘上海市普陀区金沙江路 1518 弄‘},
 5    { date: ‘2016-05-02‘, name: ‘王小虎‘, address: ‘上海市普陀区金沙江路 1518 弄‘},
 6    { date: ‘2016-05-03‘, name: ‘王小虎‘, address: ‘上海市普陀区金沙江路 1518 弄‘},
 7    { date: ‘2016-05-04‘, name: ‘王小虎‘, address: ‘上海市普陀区金沙江路 1518 弄‘},
 8   ], // 总数据
 9   currentPage: 1, // 当前页
10   pageSize: 1, // 一页展示的条数
11   totalCount: 4, // 数据总数
12   renderData: [] // 真正渲染出的数据
13  }
14 }

 

method方法有:

 1 methods: {
 2  // 修改一页的条数
 3  handleSizeChange(val) {
 4   this.pageSize = val;
 5   this.currentPage = 1;
 6   this.slicePage();
 7  },
 8  // 修改当前页
 9  handleCurrentChange(val) {
10   this.currentPage = val;
11   this.slicePage();
12  },
13  // 页面划分
14  slicePage() {
15   const len = this.tableData.length;
16   const begin = (this.currentPage - 1) * this.pageSize; // 开始下标
17   const end = begin + this.pageSize; // 结束下标
18   this.renderData = end >= len ? this.tableData.slice(begin, len) : this.tableData.slice(begin, end);
19  }
20 }

注意最后el-table最后读取的是renderData进行的渲染,而不是tableData这个总的数组。

 

这里的实现的关键是通过slicePage方法得出当前要展示的数据。假设每页展示3条,则需要分成2页,第一页展示下标为0到2的数据,第二页展示下标为3的数据。大概思路为:

① 算出表格如果一页数据显示满的情况下的开始下标和结束下标。开始下标为当前页码减一再和pageSize相乘,如第二页的第一条数据下标为(2-1)*3=3,结束下标只需在begin的基础上加上pageSize即可。(这里的结束下标end并不是真正的结束下标,真正的需要减一,这里只是为了之后使用slice时方便)。

② 判断当前页是否能显示满,如果可以,则这一页展示从开始下标起到结束下标,如果不能,则从开始下标列到这个tableData数组的结尾。判断能否显示满的方法为上一步算出的结束下标和tableData数组的长度进行比较,如果结束下标还在数组的长度范围内,则说明这一页可以显示满,如果大于数组长度,则相当于到最后一页了(这一说法可能不太准确)。最后根据不同情况对tableData进行截取即可。

 

实现效果如下:

技术图片

 

 技术图片

技术图片

 

 

在此做一下记录,方便以后如果没什么思路的话可以作为参考。

基于element-ui实现的同步分页

标签:修改   alc   底部   mic   image   根据   bsp   现在   out   

原文地址:https://www.cnblogs.com/seventeenq/p/12271162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!