网站建设职业情况,昆山专业网站建设,展示网站建设价格,义乌专业做网站的问题描述#xff1a;后端接口返回大量数据#xff0c;没有做分页处理#xff0c;不支持传参pageNum#xff0c;pageSize
本文为转载文章#xff0c;原文章#xff1a;后端一次返回大量数据#xff0c;前端做分页处理
1.template中
分页
el-paginationsize-chang…问题描述后端接口返回大量数据没有做分页处理不支持传参pageNumpageSize
本文为转载文章原文章后端一次返回大量数据前端做分页处理
1.template中
分页
el-paginationsize-changehandleSizeChange:page-sizes[10, 20, 50, 100]stylefloat:rightcurrent-changecurrentChangeHandle:current-pagecurrentPage:page-sizepageSize:totaltotalPagelayouttotal, 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.CODE000){this.totalPageres.data.BODY.total;// 获取后端返回所有数据this.tableDatares.data.BODY.rows; // 对所有数据进行处理截取数据前 n条数据显示到页面上this.dataListthis.tableData.slice(0, this.pageSize)}})
},改变页数事件
// val 是当前页数
currentChangeHandle (val) {this.currentPageval;this.dataList this.tableData.slice((val - 1) * this.pageSize, val * this.pageSize)
},改变条数事件
// val每页显示多少条
handleSizeChange(val) {this.dataForm.pageSizeval;this.dataList this.tableData.slice((this.currentPage - 1) * val, this.currentPage * val)
},
