element分页组件控制翻页

问题：

点击分页组件切换页码，切换之前显示消息提示框，根据消息提示框的操作来确定是否切换页码。但是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;
    }
  }
};