element ui 上一页下一页_Vue + element-ui分页该怎么用?

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

以下是正常第一页显示

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

这是点击下一页的数据

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

HTML

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();

}

},