前端Vue實現分頁功能

我們都知道在spring boot項目中安裝pagehelper可以實現分頁功能，但是在vue中也能在前端實現分頁。
1、
首先，在data中定義以下變量：

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

2、發送請求，獲取后端數據（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、根據返回數據list的length來計算data中變量的值：

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

4、調用getCurrentPageData（）方法設置當前頁面的數據

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

5、添加按鈕并實現首頁、尾頁、上一頁、下一頁功能：

<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

前端展示：

總結

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

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