在后台管理系统中，经常会用到表格的展示。使用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进行截取即可。
实现效果如下：
在此做一下记录，方便以后如果没什么思路的话可以作为参考。