The use of ElementUI paging component Pagination in Vue is for your reference. The specific content is as follows 1. OverviewElementUI provides the el-pagination component. Pagination can be achieved by configuring the corresponding parameters and events. 2. Implementation 1. Basic usage <div class="pagination"> <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="tablePage.pageNum" :page-size="tablePage.pageSize" :page-sizes="pageSizes" :total="tablePage.total" @size-change="handleSizeChange" @current-change="handlePageChange" /> </div> data() { return { tablePage: { pageNum: 1, // Page number pageSize: 10, // Number of records per page total: 0 // Total number of records }, pageSizes: [10, 20, 30] } }, methods: { handlePageChange(currentPage) { this.tablePage.pageNum = currentPage // Refresh data here}, handleSizeChange(pageSize) { this.tablePage.pageSize = pageSize // Refresh data here} } 2. Implementation of backend paging Implementation idea: Send a request to the backend, pass in the two parameters pageNum and pageSize, and directly get the corresponding paging data. // Get data getData() { let param = { pageNum: this.tablePage.pageNum, pageSize: this.tablePage.pageSize } // Request backend interface function getDataApi(param, { loading: true }).then(res => { //Background return data this.list = res.data.list this.tablePage.total = res.data.total }) }, 3. Implementation of front-end paging Implementation idea: Send a request to the background to obtain all the data. The front end processes the data through pageNum and pageSize, and finally obtains the corresponding paging data. There are two ways to process the data: 1. Use Array.slice to extract the desired array fragment (this method takes into account the total number of pages "1" and the last page) /** * Paging data processing * @param data [Array] Data to be paginated * @param num [Number] Current page * @param size [Number] Number of items to display per page */ getList(data, num, size) { let list, total, start, end, isFirst, isLast total = data.length isFirst = total < size isLast = Math.ceil(total / size) === num start = (num - 1) * size end = isFirst || isLast ? start + (total % size) : start + size list = data.slice(start, end) list.forEach((item, index) => { item.seq = index + start }) return list } /** * Paging data processing * @param data [Array] Data to be paginated * @param num [Number] Current page * @param size [Number] Number of items to display per page */ getList(data, num, size) { let list, start, end start = (num - 1) * size end = start + size list = data.filter((item, index) => { return index >= start && index < end }) list.forEach((item, index) => { item.seq = index + start }) return list } Summary: Whether it is front-end paging or back-end paging, two parameters are ultimately needed: pageNum (current page) and pageSize (number of entries per page). The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to query a record in Mysql in which page of paging
>>: VMware virtual machine installation CentOS 8 (1905) system tutorial diagram
This article shares with you the specific code of...
Table of contents 1. Write Webshell into outfile ...
If you have a choice, you should use UTF-8 In fac...
Preface Recently, I have been helping clients con...
The solution to the transparent font problem after...
Preface I recently made a fireworks animation, wh...
This article shares the specific code of a simple...
Table of contents Drop-down multiple-select box U...
The PC version of React was refactored to use Ama...
1. Overview The so-called life cycle function is ...
<input> is used to collect user information ...
First put a piece of code for(int i=0;i<1000;i...
Solve the problem of not being able to access the...
background Not long ago, I made a function about ...
During normal project development, if the MySQL v...