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
Preface Samba is a free software that implements ...
Table of contents 1 Test Cases 2 JS array dedupli...
Table of contents Overview The role of reverse pr...
Table of contents First method App.vue Home.vue H...
I was recently working on a project about face co...
Table of contents Preface: 1. Create a project wi...
Preface In a recent project, we need to save a la...
This article shares the MySQL 5.7.18 MSI installa...
Table of contents 1. Why Redux 2. Redux Data flow...
To solve the problem that Deepin cannot start Goo...
Achieve results Implementation ideas The melting ...
Preface 1. Debounce: After a high-frequency event...
Recently, the company happened to be doing live b...
Table of contents 1 A brief introduction to syste...
I just installed Ubuntu and there was no network ...