vue+element 调列表接口未返回分页内容,前端页面分页

分页内容:

	<div class="ui-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pageSize"
          layout=" prev, pager, next, total, sizes"
          :total="total">
        </el-pagination>
     </div>

data return里定义的内容:

接口返回的数据获取:

分页的方法(在列表接口需调用):

calcPageData(){
        // 计算页数(根据后台数据的条数和每页显示数量算出一共几页,得0时设为1)
        if(this.tableData.length > 1){
            this.pageNum = Math.ceil(this.tableData.length / this.pageSize) || 1;
            console.log('总页数:',this.pageNum);
        }
        // 数据分组
        for (let i = 0; i < this.pageNum; i++) {
            // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
            // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
            this.totalPageData[i] = this.tableData.slice(this.pageSize * i, this.pageSize * (i + 1));
        }
        // 获取到数据后显示第一页内容,数组下标是从0开始的，这里一定要减去1，不然会丢失一组数据
        this.dataShow = this.totalPageData[this.currentPage - 1];
        console.log(this.dataShow);
 },

点击分页的方法:

	//分页大小，重新加载
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.calcPageData()
    },
    //选择页数，重新加载
    handleCurrentChange(newPageNum) {
      this.currentPage = newPageNum;
      this.dataShow = this.totalPageData[newPageNum - 1];
    },

列表渲染数据时的处理:

谢谢大家