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;
    }
  }
};