Element-UI踩坑之Pagination元件

Codeeeee發表於2018-10-28
UI元件

先說結論：在改變pageSize時，若當前的currentPage超過了最大有效值，就會修改為最大有效值。

一般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>
複製程式碼

資料都是非同步獲取的，所以會定義一個獲取資料的方法：

getData() {
  const params = {
    pageSize: this.pageSize,
    currentPage: this.currentPage
  };

  get(params).then(res => {
    if (res.status === 0) {
      ...
      this.total = res.result.count;
    }
  });
}
複製程式碼

一般我們會在pageSize或currentPage改變時，再次去獲取新資料：

handleSizeChange(val) {
  this.pageSize = val;
  this.getData();
},
handleCurrentChange(val) {
  this.currentPage = val;
  this.getData();
}
複製程式碼

以上都符合常理，看起來沒什麼問題！但是，來看以下這種特殊情況： 假設有473條資料，即total = 473 當前pageSize = 10, pageCount = Math.ceil(473 / 10) = 48, currentPage = 48 現在將pageSize = 200，則pageCount = Math.ceil(473 / 200) = 3

這時奇怪的事情就發生了，首先頁面的表現為：先是無資料，然後過一會資料才載入。 開啟控制檯檢視網路請求，發現獲取了兩次資料！ 檢視請求引數，第一次為：pageSize: 200, currentPage : 48 第二次為：pageSize: 200, currentPage: 3

這好像可以解釋了，為什麼請求了兩次資料？因為pageSize與currentPage的改變都會觸發事件去請求資料。 但是！pageSize是我們手動改變的，那currentPage呢？ 檢視整個元件內可能觸發currentPage的行為，但並沒有。 那只有一種可能，就是Element-UI庫內部幫我們修改的！ 秉著不求甚解的理念，去檢視了Element-UI中Pagination元件的原始碼： 其中currentPage在Pagination元件內叫 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);
        }
      }
    }
}
複製程式碼

注意我註釋標明的地方： newVal = this.getValidCurrentPage(newVal) 方法名getValidCurrentPage，顧名思義 獲取有效的當前頁

以上兩點足以證明，Element-UI中的Pagination元件會修改currentPage為一個有效值！

具體看看getValidCurrentPage方法的實現：

getValidCurrentPage(value) {
      value = parseInt(value, 10);
      
      const havePageCount = typeof this.internalPageCount === 'number';

      let resetValue;
      if (!havePageCount) {
        if (isNaN(value) || value < 1) resetValue = 1;
      } else {
        if (value < 1) {
          resetValue = 1;
        } else if (value > this.internalPageCount) {
          // 注意這裡
          resetValue = this.internalPageCount;
        }
      }

      if (resetValue === undefined && isNaN(value)) {
        resetValue = 1;
      } else if (resetValue === 0) {
        resetValue = 1;
      }

      return resetValue === undefined ? value : resetValue;
 }
複製程式碼

重點看這句程式碼：

else if (value > this.internalPageCount) {
    resetValue = this.internalPageCount;
}
複製程式碼

這裡就是我們遇到的特殊情況，在改變pageSize時，若當前的currentPage超過了最大有效值，就會修改為最大有效值！

其實Element-UI修改的說法並不正確，它只是向上派發了事件，最終修改值的是我們自己。

相關文章