Vue + element-ui分页该怎么用?

Question

分页里的数据都动态渲染, 但是当点击分页的时候, 不会把当前点击的页面渲染出来, 默认是在第一页
以下是正常第一页显示

当点击第二分页还是显示默认第一页数据

这是点击下一页的数据

这是点击到第三页还是显示1, 数据对不上

HTML

<div class="block">

   <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.currentPage" :page-size="query.pageSize" layout="total, prev, pager, next, jumper" :total="query.recordCount">

   </el-pagination>

</div> 

data() {

return {

  tableData: [],

  query: {

    pageNum: 1,

    pageSize: 10,

    currentPage: 1,

    recordCount: 1150

  }

};

},

methods: {

createTableData() {   

  this.$http

    .get(this.$api.tableData, { params: this.query.pageNum })

    .then(res => {

      if (res.status == 200) {

        this.tableData = res.data.data.pageBean.recordList;

        this.query.recordCount = res.data.data.pageBean.recordCount;

        this.query.pageSize = res.data.data.pageBean.pageSize;

        this.query.currentPage = res.data.data.pageBean.currentPage;

      }else {

        throw res.message;

      }

    })

    .catch(err => {

      console.log("createChartOne有异常", err);

    });

},

// 分页

handleSizeChange(val) {

  console.log(`每页 ${val} 条`);

},

handleCurrentChange(pageNum) {

  this.query.pageNum = pageNum;

  this.createTableData();

},

created() {

  this.createTableData();

  }

},

Answer 1

参数写错了, 正确的是params: { pageNum: this.query.currentPage }

Answer 2

没看到哪里不对。。。api返回数据确认没问题吗？

Answer 3

1、问题：分页函数的页数值你是赋值给this.query.pageNum，所以你打印this.query内的currentPage会一直是1。2、谷歌这么好的浏览器，你可以直接在开发者工具Network上查看API请求参数，在headers下的Form Data即可看到。这样你才能去排查问题。