给分页组件增加翻页控制

问题：

我想要实现在翻页组件上增加一个校验条件，如果不满足条件就不让其翻页。

但是Pagination组件没有页码切换前的回调，只有切换后的回调。

分析：

分页组件中，

1. current-page可以通过.sync修饰符实现双向绑定当前页码。

2. current-change可以配置页码变化后回调，此时分页组件的页码current-page已经改变了，并且呈现在UI上。

3. 根据提示框的操作来确定是否翻页，首先要知道当前页码和新页码，由于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;
    }
  }
};