element-ui 调后端接口进行分页和前端不调后端接口进行分页

加蓓努力我先飞

已于 2022-04-15 14:24:32 修改

阅读量1k

点赞数 1

分类专栏：前端开发文章标签：前端

于 2022-01-25 15:23:35 首次发布

本文链接：https://blog.csdn.net/ingenuou_/article/details/122685819

版权

前端开发专栏收录该内容

92 篇文章 4 订阅

订阅专栏

<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-right: 10px" :page-size="pageSize" :current-page="pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>

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