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

MySQL slow log online problems and optimization solutions

MySQL slow log is a type of information that MySQ...

Docker executes a command in a container outside the container

Sometimes we want to execute a command in a conta...

Implementing a web calculator based on JavaScript

This article shares the specific code of JavaScri...

How to install ELK in Docker and implement JSON format log analysis

What is ELK? ELK is a complete set of log collect...

Detailed explanation of the difference between chown and chmod commands in Linux

In Linux system, both chmod and chown commands ca...

A brief discussion on the underlying principle of mysql join

Table of contents join algorithm The difference b...

Embed codes for several older players

The players we see on the web pages are nothing m...

HTML line spacing setting methods and problems

To set the line spacing of <p></p>, us...

How to use Vue3 mixin

Table of contents 1. How to use mixin? 2. Notes o...

Four completely different experiences in Apple Watch interaction design revealed

Today is still a case of Watch app design. I love...

Thirty HTML coding guidelines for beginners

1. Always close HTML tags In the source code of p...

How to check if a table exists in MySQL and then delete it in batches

1. I searched for a long time on the Internet but...