Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve a simple paging function in vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The details are as follows

We all know that paging can be achieved by installing pagehelper in a spring boot project, but paging can also be achieved at the front end in vue.

1. First, define the following variables in data:

Data () {return {list: null, listLoading: true, totalPage: 1, / total total number of pages, default is 1 currentPage: 1, / / current number of pages, default is 1 pageSize: 5, / / display quantity per page currentPageData: [], / / current page display content headPage: 1}}

2. Send a request to get the backend data (list collection)

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. Calculate the value of the variable in the data based on the length of the returned data list:

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

4. Call the getCurrentPageData () method to set the data of the current page

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

5. Add buttons and implement the functions of the home page, the last page, the previous page and the next page:

/ / previous page prevPage () {if (this.currentPage = = 1) {return false;} else {this.currentPage--; this.getCurrentPageData () }}, / / next page nextPage () {if (this.currentPage = = this.totalPage) {return false;} else {this.currentPage++ This.getCurrentPageData ();}}, / / last page lastPage () {if (this.currentPage= = this.totalPage) {return false;} else {this.currentPage=this.totalPage This.getCurrentPageData ();}}, / / Home firstPage () {this.currentPage= this.headPage; this.getCurrentPageData ();}

Be careful!

Finally, you need to modify the data in the component

Front-end display:

This is the end of this article on "how to achieve simple paging in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.