只要涉及到數(shù)據(jù)查詢，通常我們都會(huì)進(jìn)行分頁(yè)查詢。

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

結(jié)合 Spring

Spring 和 Vue 都提供了開(kāi)箱即用的分頁(yè)功能。

Spring 主要用來(lái)處理后端的分頁(yè)查詢，VUE 主要在前端展示頁(yè)面和進(jìn)行下一個(gè)頁(yè)面的查詢。

有關(guān)后端 Spring 如何進(jìn)行分頁(yè)查詢的方法，請(qǐng)參考：Spring Data @Repository 的分頁(yè)查詢?中的文章。

如果你配置得當(dāng)，Spring 會(huì)將整個(gè)查詢的頁(yè)面信息發(fā)送給前端。

比如我們說(shuō)的這一部分，在這部分中，我們會(huì)知道總共查詢的記錄有多少，每一頁(yè)的大小，一共有多少頁(yè)，當(dāng)前是第幾頁(yè)等分頁(yè)最重要的信息。

VUE

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

我們直接在前端調(diào)用模板，將參數(shù)設(shè)置進(jìn)來(lái)就完成了。

代碼可以精簡(jiǎn)到只有下面幾句話：

<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>

不用重復(fù)做無(wú)用的事情了。

第一個(gè)參數(shù)是當(dāng)前的頁(yè)面是第幾頁(yè)。

第二個(gè)參數(shù)為一共有多少條記錄。

第三個(gè)參數(shù)為當(dāng)前分頁(yè)的頁(yè)面大小。

第四個(gè)參數(shù)為，如果頁(yè)碼被單擊了，我們會(huì)觸發(fā)一個(gè)什么樣的函數(shù)，通常這個(gè)函數(shù)就是通過(guò) AJAX 的調(diào)用到后臺(tái)再獲取一次數(shù)據(jù)。

是不是簡(jiǎn)單到令人發(fā)指。

如果沒(méi)有這個(gè)模板的話，我們需要手寫(xiě)分頁(yè)，還要算頁(yè)面編碼，真心沒(méi)必要。

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

我們的分頁(yè)效果為

頁(yè)面看起來(lái)還非常干凈喔。

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

總結(jié)

以上是生活随笔為你收集整理的VUE 数据分页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。