快捷導(dǎo)航

vue實現(xiàn)簡單的分頁功能

更新時間：2022年03月04日 10:28:23 作者：HLC!

這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前端Vue實現(xiàn)分頁功能，供大家參考，具體內(nèi)容如下

我們都知道在spring boot項目中安裝pagehelper可以實現(xiàn)分頁功能，但是在vue中也能在前端實現(xiàn)分頁。

1、首先，在data中定義以下變量：

data() {
? ? return {
? ? ? list: null,
? ? ? listLoading: true,
? ? ? totalPage: 1, // 統(tǒng)共頁數(shù)，默認為1
?? ??? ??? ?currentPage: 1, //當前頁數(shù) ，默認為1
?? ??? ??? ?pageSize: 5, // 每頁顯示數(shù)量
? ? ? currentPageData: [], //當前頁顯示內(nèi)容
? ? ? headPage: 1
? ? }
? },

2、發(fā)送請求，獲取后端數(shù)據(jù)（list集合）

axios.get('http://192.168.56.1:8081/sel/'+id).then((res) =>{
? ? ? ? console.log(res.data.data )?
? ? ? ? that.list = res.data.data?
? ? ? ? that.listLoading = false

3、根據(jù)返回數(shù)據(jù)list的length來計算data中變量的值：

this.totalPage=Math.ceil(this.list.length / this.pageSize);
? ? ? ? this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
? ? ? ? this.getCurrentPageData();

4、調(diào)用getCurrentPageData（）方法設(shè)置當前頁面的數(shù)據(jù)

getCurrentPageData() {
?? ??? ??? ? ? ? ? ? ? ?let begin = (this.currentPage - 1) * this.pageSize;
?? ??? ??? ? ? ? ? ? ? ?let end = this.currentPage * this.pageSize;
?? ??? ??? ? ? ? ? ? ? ?this.currentPageData = this.list.slice(
?? ??? ??? ? ? ? ? ? ? ? ? ?begin,
?? ??? ??? ? ? ? ? ? ? ? ? ?end
?? ??? ??? ? ? ? ? ? ? ?);
?? ??? ??? ? ? ? ? ?},

5、添加按鈕并實現(xiàn)首頁、尾頁、上一頁、下一頁功能：

<input type="button" value="首頁" @click="firstPage">
<input type="button" value="上一頁" @click="prevPage">
<input type="button" value="下一頁" @click="nextPage">
<input type="button" value="尾頁" @click="lastPage">

?//上一頁
prevPage() {
?? ??? ??? ? ? ? ? ? ?
?? ??? ???if (this.currentPage == 1) {
?? ??? ??? ? ?? ?return false;
?? ??? ??? ??} else {
?? ??? ??? ? ? ? this.currentPage--;
?? ??? ??? ? ? ? this.getCurrentPageData();
?? ??? ??? ? ? ?}
?? ??? ??? ? ? ? ? ?},
?? ??? ??? ? ? ? ? ?// 下一頁
?? ??? ??? ? ? ? ? ?nextPage() {

?? ??? ??? ? ? ? ? ? ? ?if (this.currentPage == this.totalPage) {
?? ??? ??? ? ? ? ? ? ? ? ? ?return false;
?? ??? ??? ? ? ? ? ? ? ?} else {
?? ??? ??? ? ? ? ? ? ? ? ? ?this.currentPage++;
?? ??? ??? ? ? ? ? ? ? ? ? ?this.getCurrentPageData();
?? ??? ??? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? },
? ? ? ? ? ? ? //尾頁
? ? ? ? ? ? ? lastPage() {

?? ??? ??? ? ? if (this.currentPage == this.totalPage) {
?? ??? ??? ? ? ? ? ??return false;
?? ??? ??? ? ? ? ? ? ? ?} else {
?? ??? ??? ? ? ? ? ??this.currentPage=this.totalPage;
?? ??? ??? ? ? ? ? ?  this.getCurrentPageData();
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? } ,
? ? ? ? ? ?//首頁
? ? ? ? ? ? ? firstPage(){
? ? ? ? ? ?  this.currentPage= ?this.headPage;
? ? ? ? ? ?  this.getCurrentPageData();
}

注意！

最后需要修改組件中的data