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
MySQL slow log is a type of information that MySQ...
Sometimes we want to execute a command in a conta...
This article shares the specific code of JavaScri...
What is ELK? ELK is a complete set of log collect...
1. Key points for early planning of VMware vSpher...
In Linux system, both chmod and chown commands ca...
Table of contents join algorithm The difference b...
The players we see on the web pages are nothing m...
Given an array [1,8,5,4,3,9,2], write an algorith...
Preface Today, after synchronizing the order data...
To set the line spacing of <p></p>, us...
Table of contents 1. How to use mixin? 2. Notes o...
Today is still a case of Watch app design. I love...
1. Always close HTML tags In the source code of p...
1. I searched for a long time on the Internet but...