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
https://blog.csdn.net/Fiona_lms/article/details/81368918