先說(shuō)結(jié)論：在改變pageSize時(shí)，若當(dāng)前的currentPage超過(guò)了最大有效值，就會(huì)修改為最大有效值。

一般Pagination組件的聲明如下：

<el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :page-size="pageSize"  :current-page="currentPage" :total="total" :page-sizes="[10, 20, 50, 100, 200, 300, 400]"  layout="total, sizes, prev, pager, next, jumper"></el-pagination>

數(shù)據(jù)都是異步獲取的，所以會(huì)定義一個(gè)獲取數(shù)據(jù)的方法：

getData() { const params = { pageSize: this.pageSize, currentPage: this.currentPage }; get(params).then(res => { if (res.status === 0) { ... this.total = res.result.count; } });}

一般我們會(huì)在pageSize或currentPage改變時(shí)，再次去獲取新數(shù)據(jù)：

handleSizeChange(val) { this.pageSize = val; this.getData();},handleCurrentChange(val) { this.currentPage = val; this.getData();}

以上都符合常理，看起來(lái)沒(méi)什么問(wèn)題！但是，來(lái)看以下這種特殊情況：

假設(shè)有473條數(shù)據(jù)，即total = 473

當(dāng)前pageSize = 10, pageCount = Math.ceil(473 / 10) = 48, currentPage = 48

現(xiàn)在將pageSize = 200，則pageCount = Math.ceil(473 / 200) = 3

這時(shí)奇怪的事情就發(fā)生了，首先頁(yè)面的表現(xiàn)為：先是無(wú)數(shù)據(jù)，然后過(guò)一會(huì)數(shù)據(jù)才加載。

打開(kāi)控制臺(tái)查看網(wǎng)絡(luò)請(qǐng)求，發(fā)現(xiàn)獲取了兩次數(shù)據(jù)！

查看請(qǐng)求參數(shù)，第一次為：pageSize: 200, currentPage : 48

第二次為：pageSize: 200, currentPage: 3

這好像可以解釋了，為什么請(qǐng)求了兩次數(shù)據(jù)？因?yàn)閜ageSize與currentPage的改變都會(huì)觸發(fā)事件去請(qǐng)求數(shù)據(jù)。

但是！pageSize是我們手動(dòng)改變的，那currentPage呢？

查看整個(gè)組件內(nèi)可能觸發(fā)currentPage的行為，但并沒(méi)有。

那只有一種可能，就是Element-UI庫(kù)內(nèi)部幫我們修改的！

秉著不求甚解的理念，去查看了Element-UI中Pagination組件的源碼：

其中currentPage在Pagination組件內(nèi)叫 internalCurrentPage

watch: { internalCurrentPage: { immediate: true, handler(newVal, oldVal) { newVal = parseInt(newVal, 10); /* istanbul ignore if */ if (isNaN(newVal)) {  newVal = oldVal || 1; } else {  // 注意這里   newVal = this.getValidCurrentPage(newVal); } if (newVal !== undefined) {  this.internalCurrentPage = newVal;  if (oldVal !== newVal) {  this.$emit('currentPage', newVal);  } } else {  this.$emit('currentPage', newVal); } } }}

注意我注釋標(biāo)明的地方：

newVal = this.getValidCurrentPage(newVal)

方法名getValidCurrentPage，顧名思義 獲取有效的當(dāng)前頁(yè)

以上兩點(diǎn)足以證明，Element-UI中的Pagination組件會(huì)修改currentPage為一個(gè)有效值！