Element的Pagination分頁sync問題怎么解決

本文小編為大家詳細介紹“Element的Pagination分頁sync問題怎么解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Element的Pagination分頁sync問題怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

今天用到Element-UI的Pagination分頁組件時選擇頁面大小時和點擊分頁時，無法動態刷新頁面數據,數據如下：

<div class="pagination">
      <el-pagination 
      background
      :page-size="pageSize"
      :current-page="currentPage"
      :page-sizes='[5, 10, 20, 40]'
      :total="tableData.length"
      layout="total,sizes,prev,pager,next,jumper"
      ></el-pagination>
</div>

錯誤如下：

按官方所說，加.sync，優化如下:

<div class="pagination">
      <el-pagination 
      background
      :page-size.sync="pageSize"
      :current-page.sync="currentPage"
      :page-sizes='[5, 10, 20, 40]'
      :total="tableData.length"
      layout="total,sizes,prev,pager,next,jumper"
      ></el-pagination>
</div>

還是存在問題,當前頁面能改變，但頁面大小不變，如下所示:

問題解析 ===> Element-ui el-pagination封裝之sync多層的問題

最終優化方案：

<div class="pagination">
      <el-pagination 
      background
      :page-size="pageSize"
      :current-page="currentPage"
      :page-sizes='[5, 10, 20, 40]'
      :total="tableData.length"
      layout="total,sizes,prev,pager,next,jumper"
      @size-change="handlePageSizeChange"
      @current-change="handlePageChange"
      ></el-pagination>
</div>

methods: {
    
    handlePageChange(val) {
      this.currentPage = val
    },
    handlePageSizeChange(val) {
      this.pageSize =val
    }
}

優化結果:

讀到這里，這篇“Element的Pagination分頁sync問題怎么解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。