问题:
点击分页组件切换页码,切换之前显示消息提示框,根据消息提示框的操作来确定是否切换页码。但是Pagination
组件没有页码切换前的回调,只有切换后的回调。
分析:
分页组件的current-page
可以通过.sync
修饰符实现双向绑定当前页码,分页组件的current-change
可以配置页码变化后回调,此时分页组件的页码current-page
已经改变了,并且呈现在UI上。根据提示框的操作来确定是否切换页码,首先要知道当前页码和新页码,由于current-page
是页码变化后的回调,所以在回调里面要知道变化前的页码,变化前的页码要通过watch
得到并记录下来。
解决:
<el-pagination
layout="prev, pager, next"
:total="total"
:current-page.sync="pageNo"
:page-size="limit"
@current-change="handleCurrentChange">
</el-pagination>
export default {
data() {
return {
pageNo: 1, // 当前页码
limit: 10, // 每页限制数量
total: 0, // 数据总条数
oldPage: 1 // 记录历史页码
};
},
methods: {
handleCurrentChange(page) {
this.pageNo = this.oldPage; // 进入回调就赋值防止消息弹窗下面看到当前页是变化后页码
this.$confirm('是否继续翻页?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.pageNo = page;
this.getList(); // 获取对应页码数据方法
})
},
},
watch: {
pageNo(val, old) {
this.oldPage = old;
}
}
};