只要涉及到數據查詢，通常我們都會進行分頁查詢。

假設你的表中有上百萬條記錄，不分頁的話，我們不可能一次性將所有數據全部都載入到前端吧，那前后端都早就崩潰了。

結合 Spring

Spring 和 Vue 都提供了開箱即用的分頁功能。

Spring 主要用來處理后端的分頁查詢，VUE 主要在前端展示頁面和進行下一個頁面的查詢。

有關后端 Spring 如何進行分頁查詢的方法，請參考：Spring Data @Repository 的分頁查詢?中的文章。

如果你配置得當，Spring 會將整個查詢的頁面信息發送給前端。

比如我們說的這一部分，在這部分中，我們會知道總共查詢的記錄有多少，每一頁的大小，一共有多少頁，當前是第幾頁等分頁最重要的信息。

VUE

VUE 的前端可以用 Pagination 這個組件?Pagination | Components | BootstrapVue

我們直接在前端調用模板，將參數設置進來就完成了。

代碼可以精簡到只有下面幾句話：

<b-paginationv-model="pagedData.number":total-rows="pagedData.totalElements":per-page="pagedData.size"@click="pageSearch(pagedData.number -1)"class="pagination pagination-rounded justify-content-end mb-2"></b-pagination>

不用重復做無用的事情了。

第一個參數是當前的頁面是第幾頁。

第二個參數為一共有多少條記錄。

第三個參數為當前分頁的頁面大小。

第四個參數為，如果頁碼被單擊了，我們會觸發一個什么樣的函數，通常這個函數就是通過 AJAX 的調用到后臺再獲取一次數據。

是不是簡單到令人發指。

如果沒有這個模板的話，我們需要手寫分頁，還要算頁面編碼，真心沒必要。

如果想使用不同的 CSS 的話，在分頁模板中加入自己的 CSS 就可以了。

我們的分頁效果為

頁面看起來還非常干凈喔。

VUE 數據分頁 - 前端 - OSSEZ只要涉及到數據查詢，通常我們都會進行分頁查詢。 假設你的表中有上百萬條記錄，不分頁的話，我們不可能一次性將所有數據全部都載入到前端吧，那前后端都早就崩潰了。 結合 SpringSpring 和 Vue 都提供了開箱即用的分頁功能。 Spring 主要用來處理后端的分頁查詢，VUE 主要在前端展示頁面和進行下一個頁面的查詢。 有關后端 Spring 如何進行分頁查詢的方法，請參考：Spring Data @Repository…https://www.ossez.com/t/vue/14117

總結

以上是生活随笔為你收集整理的VUE 数据分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。