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
Unzip the file into a directory This is the direc...
This article example shares the specific code of ...
【Foreword】 Recently I want to stress test ITOO...
This article is a self-written imitation of the X...
Most of the time, plug-ins are used to upload fil...
This article mainly explains tables, which are no...
Table of contents 1. Introduction to Slow Log 2. ...
Use indexes to speed up queries 1. Introduction I...
Everything is a file! UNIX has already said it. E...
The following HTML tags basically include all exis...
Why do we achieve this effect? In fact, this ef...
I usually like to visit the special pages or prod...
Problem Description After installing Qt5.15.0, an...
Dockerfile is a text file used to build an image....
Table of contents Brief summary At noon today, th...