How to use ElementUI pagination component Pagination in Vue

How to use ElementUI pagination component Pagination in Vue

The use of ElementUI paging component Pagination in Vue is for your reference. The specific content is as follows

1. Overview

ElementUI 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)
2. Use Array.filter to filter out the desired array fragment (this method does not need to consider the total number of pages is "1" and the last page, as long as the conditions are met

/**
     * 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:
  • Table paging function implemented by Vue2.0+ElementUI+PageHelper
  • Vue component library ElementUI realizes the paging effect of table list
  • Detailed explanation of the problem that the paging component view of elementUI is not updated when Vue modifies it
  • vue+elementUI component table realizes front-end paging function
  • Vue+ElementUI table realizes table paging
  • Vue+ElementUI implements paging function-mysql data

<<:  How to query a record in Mysql in which page of paging

>>:  VMware virtual machine installation CentOS 8 (1905) system tutorial diagram

Recommend

js realizes the dynamic loading of data by waterfall flow bottoming out

This article shares with you the specific code of...

Summary of various postures of MySQL privilege escalation

Table of contents 1. Write Webshell into outfile ...

Why web page encoding uses utf-8 instead of gbk or gb2312?

If you have a choice, you should use UTF-8 In fac...

Introduction to Nginx regular expression related parameters and rules

Preface Recently, I have been helping clients con...

Solution to transparent font problem after turning on ClearType in IE

The solution to the transparent font problem after...

Understanding the CSS transform-origin property

Preface I recently made a fireworks animation, wh...

Use js to write a simple snake game

This article shares the specific code of a simple...

ElementUI implements sample code for drop-down options and multiple-select boxes

Table of contents Drop-down multiple-select box U...

React implementation example using Amap (react-amap)

The PC version of React was refactored to use Ama...

Detailed explanation of Vue3 life cycle functions and methods

1. Overview The so-called life cycle function is ...

HTML simple web form creation example introduction

<input> is used to collect user information ...

Introduction to the use and difference between in and exists in MySQL

First put a piece of code for(int i=0;i<1000;i...

Vue implements the browser-side code scanning function

background Not long ago, I made a function about ...

The pitfalls and solutions caused by the default value of sql_mode in MySQL 5.7

During normal project development, if the MySQL v...