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