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

Native JS encapsulation vue Tab switching effect

This article example shares the specific code of ...

How to use xshell to connect to Linux in VMware (2 methods)

【Foreword】 Recently I want to stress test ITOO...

JavaScript imitates Xiaomi carousel effect

This article is a self-written imitation of the X...

File upload via HTML5 on mobile

Most of the time, plug-ins are used to upload fil...

Bootstrap3.0 study notes table related

This article mainly explains tables, which are no...

Summary of MySQL slow log related knowledge

Table of contents 1. Introduction to Slow Log 2. ...

MySql index improves query speed common methods code examples

Use indexes to speed up queries 1. Introduction I...

How to move a red rectangle with the mouse in Linux character terminal

Everything is a file! UNIX has already said it. E...

How familiar are you with pure HTML tags?

The following HTML tags basically include all exis...

Use CSS content attr to achieve mouse hover prompt (tooltip) effect

Why do we achieve this effect? ​​In fact, this ef...

CSS3 realizes bouncing ball animation

I usually like to visit the special pages or prod...

Dockerfile text file usage example analysis

Dockerfile is a text file used to build an image....

Causes and solutions for MySQL too many connections error

Table of contents Brief summary At noon today, th...