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

Complete steps to use samba to share folders in CentOS 7

Preface Samba is a free software that implements ...

JS array deduplication details

Table of contents 1 Test Cases 2 JS array dedupli...

Getting Started with Nginx Reverse Proxy

Table of contents Overview The role of reverse pr...

Detailed explanation of non-parent-child component communication in Vue3

Table of contents First method App.vue Home.vue H...

JavaScript to achieve click image flip effect

I was recently working on a project about face co...

Teach you how to build the vue3.0 project architecture step by step

Table of contents Preface: 1. Create a project wi...

Basic introductory tutorial on MySQL partition tables

Preface In a recent project, we need to save a la...

MySQL 5.7.18 MSI Installation Graphics Tutorial

This article shares the MySQL 5.7.18 MSI installa...

Detailed explanation of JavaScript state container Redux

Table of contents 1. Why Redux 2. Redux Data flow...

Pure CSS to achieve candle melting (water droplets) sample code

Achieve results Implementation ideas The melting ...

Correct use of Vue function anti-shake and throttling

Preface 1. Debounce: After a high-frequency event...

Detailed explanation of Vue's live broadcast function

Recently, the company happened to be doing live b...

Use ab tool to perform API stress test on the server

Table of contents 1 A brief introduction to syste...