ElementUI pagination分頁 自定義配置

如何使用 ElementUI 自定義分頁呢？
儘管ElementUI比較全面的提供了分頁，但實際開發中的需求是多種多樣的。好比我須要把下圖中的下拉選擇每頁的數據條數，換成能夠手動輸入的形式，而且把他的位置放到前往xx頁的左邊位置。

實現代碼以下：

<!-- 分頁 -->
<el-pagination
  class="pagination"
  @size-change="sizeChangeHandle"
  @current-change="currentChangeHandle"
  background
  :current-page="currentPage"
  :page-sizes="[]"
  :page-size="pageSize"
  layout="total, prev, pager, next, slot, jumper"
  :total="ipData.length">
  <span class="pageSizeInput">
    <el-input class="pageSizeBorder" v-model.number="pageSize" @input="handlePageSize"></el-input> 條/頁
  </span>
</el-pagination>

<script>
// 改變每一頁的數據條數
sizeChangeHandle (val) {
  this.pageSize = val
},

// 改變當前所在頁
currentChangeHandle (val) {
  this.currentPage = val
},
      
// 監聽pageSize文本框的變化，當pageSize爲空時，設置pageSize的值爲0，以防報錯
handlePageSize () {
  if (!this.pageSize) {
    this.pageSize = 0
  }
}
</script>

分析上述代碼：

在 layout 屬性用於控制分頁器的排列位置，能夠在合適的位置添加一個 slot ，而後在 el-pagination 標籤中包裹標籤，實現自定義分頁內容。slot就表明着 el-pagination 內部自定義的標籤。效果圖以下：

一些小問題

• 自定義 el-input 標籤中的 v-model 綁定 PageSize 時，要強制轉換爲數字類型，不然會報警告（應該是因爲input文本框默認爲text類型致使的）。代碼爲 v-model.number='pageSize'

• 監聽 pageSize 文本框變化函數 handlePageSize ，當 pageSize 爲空時，設置 pageSize 的值爲0，以防報錯

涉及 elementUI 樣式修改的部分能夠參考這篇文章

參考文章：https://blog.csdn.net/qq_42431872/article/details/106097979
http://www.javashuo.com/article/p-hlmvnioq-hs.html