开发过程中，分页功能一般都是后端来做的，因为数据量大的话，后端处理会比较地合适，前端就只需要传page(当前页码)和pageSize（每页最大显示条数），及其他后端需要传的参数就可以了。
但也不排除特殊情况需要我们前端去进行处理，特殊情况如下 1.后端由于某些表或其他原因，不方便进行分页传回数据，例如后端小哥突然跑过来很殷勤地说：“这次可不可以帮忙分页啊，我这边有点不太方便”，如果数据量比较小的情况下，我们就就可以帮忙分担 逻辑点如下，前端先获取后端返回的数据保存下来，然后在本地进行分页并渲染显示
一、纯js前端分页方法
/**
* @name getTableData
* @param {Number} page 当前页 默认1
* @param {Number} pageSize 每页最多显示的条数，默认10
* @param {Array} totalData 总的数据集，默认为空数组
* @return {Object}{
data //当前页展示数据 数组
page //当前页码
pageSize //每页最多显示条数
length //总的数据条数
}
**/
const getTableData=(page=1,pageSize=10,totalData=[])=>{
const {length}=totalData
const tableData={
data:[],
page,
pageSize,
length,
}
//pageSize大于等于总数据的长度，说明只有一页的数据或者没有数据
if(pageSize>=length){
tableData.data=totalData
tableData.page=1
}
//假如pageSize小于总数据长度，则数据多余一页
else{
//计算除了当前页之外的数据总量
const num=pageSize*(page-1)
//假如当前页之前的所有数据小于总的数据集长度，不能等于，这个时候则说明当前页码没有超过最大的页码
if(num //当前页的第一条数据的索引 let startIndex=num //当前页的最后一条数据的索引 let endIndex=num+pageSize-1 tableData.data=totalData.filter((_,index)=>index>=startIndex &&index<=endIndex) } //当前页码超出最大的页码，则计算实际最后一页的page，自动返回最后一页的数据 else{ //取商 let size=parseInt(length/pageSize) //取余数 let rest=length % pageSize //假如余数大于0，说明最后一页数据不足pageSize，应该取size+1为最后一条的页码 //余数大于0，说明实际最后一页的数据不足pageSize,最后一页应该size+1 if(rest>0){ tableData.page=size+1 tableData.data=tableData.data=totalData.filter((_,index)=>index>=(pageSize*size) && index<=length) } //余数等于0，最后一页的数据条数正好是pageSize else if(rest===0){ tableData.page=size tableData.data=totalData.filter((_,index)=>index>=(pageSize*size-1) && index<=length) } } } } return tableData } 二、结合vue+element-ui的分页方法 1.适用场景 一般用于数据量较小的情况，一次请求把数据全部从后端请求回来 2.实现关键 适用计算属性对获取的数据进行处理，即computed中的searchPageChange方法，然后el-table中的：data绑定searchPageChange这个方法 :data="searchPageChange" style="width: 100%" height="50"> //计算属性对数据进行处理 computed:{ //当前页-1再和页数有多少相乘 let start=(this.currentPage-1)*this.pageSize //假如初始页大于当前数据量的总长度，那么说明没有数据，则 if(start>=this.searchData.length)start=0 let end=this.currentPage*this.pageSize if(end>=this.searchData.length)end=this.searchData.length return this.searchData.slice(start,end) } 以下是vue的完整代码 {{msg}} :data="searchPageChange" stripe style="width: 1000px;margin:30px auto;" height="550" > @size-change="handleSizeChange" @current-change="handlePageChange" class="z-pagination" :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" layout="sizes, prev, pager, next, jumper,total" :total="tableData.length" > options.js配置文件 /** * 表头配置 */ const searchData= [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1510 弄", age: 18, height: "180cm" }, { date: "2016-05-04", name: "李小虎", address: "上海市普陀区金沙江路 1511 弄", age: 18, height: "180cm" }, { date: "2016-05-01", name: "孙小虎", address: "上海市普陀区金沙江路 1512 弄", age: 18, height: "180cm" }, { date: "2016-05-02", name: "朱小虎", address: "上海市普陀区金沙江路 1513 弄", age: 18, height: "180cm" }, { date: "2016-05-04", name: "钱小虎", address: "上海市普陀区金沙江路 1514 弄", age: 18, height: "180cm" }, { date: "2016-05-01", name: "杜小虎", address: "上海市普陀区金沙江路 1515 弄", age: 18, height: "180cm" }, { date: "2016-05-03", name: "赵小虎", address: "上海市普陀区金沙江路 1516 弄", age: 18, height: "180cm" }, { date: "2016-05-02", name: "陈小虎", address: "上海市普陀区金沙江路 1510 弄", age: 18, height: "180cm" }, { date: "2016-05-04", name: "吴小虎", address: "上海市普陀区金沙江路 1511 弄", age: 18, height: "180cm" }, { date: "2016-05-01", name: "徐小虎", address: "上海市普陀区金沙江路 1512 弄", age: 18, height: "180cm" }, { date: "2016-05-02", name: "黄小虎", address: "上海市普陀区金沙江路 1513 弄", age: 18, height: "180cm" }, { date: "2016-05-04", name: "秦小虎", address: "上海市普陀区金沙江路 1514 弄", age: 18, height: "180cm" } ]; export { searchData}; 此文章部分借鉴这位老哥 js实现前端分页 如何实现前端分页