问题描述:后端接口返回大量数据,没有做分页处理,不支持传参pageNum,pageSize
本文为转载文章,原文章:后端一次返回大量数据,前端做分页处理
1.template中
分页
<el-pagination @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]" style="float:right" @current-change="currentChangeHandle" :current-page="currentPage" :page-size="pageSize" :total="totalPage" layout="total, sizes,prev, pager, next, jumper"> </el-pagination>
对应的模型
data(){ return{ totalPage:0, // 数据总条数 currentPage:1, // 当前页面 pageSize:10, // 当前页面显示条数 dataList: [], // 页面展示数据 tableData: [] // 后端获取的总数据 } },
2.script中
获取后端数据
//获取初始数据 getDataList(){ api.agentDealiyWMExport(this.dataForm).then(res=>{ if(res.data.HEAD.CODE=='000'){ this.totalPage=res.data.BODY.total; // 获取后端返回所有数据 this.tableData=res.data.BODY.rows; // 对所有数据进行处理,截取数据前 n条数据,显示到页面上 this.dataList=this.tableData.slice(0, this.pageSize) } }) },
改变页数事件
// val 是当前页数 currentChangeHandle (val) { this.currentPage=val; this.dataList = this.tableData.slice((val - 1) * this.pageSize, val * this.pageSize) },
改变条数事件
// val每页显示多少条 handleSizeChange(val) { this.dataForm.pageSize=val; this.dataList = this.tableData.slice((this.currentPage - 1) * val, this.currentPage * val) },