element-ui调后台接口进行缓存和前端不调后端系统进行分页

原创
小哥 3年前 (2022-11-10) 阅读数 6 #大杂烩

        

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)
        );
      }); //根据页数显示相应内容
    },
版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除