element-ui调后台接口进行缓存和前端不调后端系统进行分页
原创
pageNum: 1, //表格演示部分 当前页面
pageSize: 10, //表格演示部分 每页显示多少条数据
total: 0, //表格演示部分 总共有多少条数据
1.调整后端接口以进行分页
//分页器更改
handleCurrentChange(val) {
this.pageNum = val;
this.projectSelectionQuery();
},
handleSizeChange(val) {
this.pageSize = val;
this.pageNum = 1;
this.projectSelectionQuery();
},
projectSelectionQuery(){
this.ruleForm.pageNum = this.pageNum;
this.ruleForm.pageSize = this.pageSize;
let params = this.ruleForm;
//这是界面。
//this.tableData = res.data.results;
//this.total = res.data.totalCnt;
},
2.前端不调整后端接口以进行分页
projectSelectionQuery(){
this.ruleForm.pageNum = this.pageNum;
this.ruleForm.pageSize = this.pageSize;
let params = this.ruleForm;
//这是界面。
//this.tableData = res.data.results;
//this.total = res.data.totalCnt;
this.originalTableData = res.data.results;
this.getResultsTable();
},
getResultsTable() {
var self = this;
var list = JSON.parse(JSON.stringify(this.originalTableData)); //后端表的数据
//表渲染数据
console.log("list", list);
this.tableData = list.filter((item, index) => {
return (
index < Number(this.pageNum) * Number(this.pageSize) &&
index >= Number(this.pageSize) * (Number(this.pageNum) - 1)
);
}); //根据页数显示相应内容
}, 版权声明
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除
上一篇:element自定义流程条 下一篇:vue循环迭代对象、数组和函数
itfan123


