Vue3+element-ui + TS encapsulates global paging components

This article describes how to use Vue3, element-ui and TypeScript to encapsulate a global pagination component.

environment dependent

Before starting, you need to install the following environment:

• View 3
• element-ui
• TypeScript

Component function

This paging component provides the following functionality:

• Support for customizing the number of items displayed on each page
• Support custom jump to specified page number
• Support displaying the total number of pages and total number of items
• Support for custom styles

Component implementation

Paging component structure

The pagination component consists of the following parts:

<template>
  <div class="pagination">
    <el-pagination
      :total="total"
      :page-size="pageSize"
      :current-page.sync="currentPage"
      :layout="'total, sizes, prev, pager, next, jumper'"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

Paging component properties

The pagination component provides the following properties:

attribute name	type	Defaults	describe
total	Number	0	total number
pageSize	Number	10	Number of items displayed per page
currentPage	Number	1	current page number

Pagination component method

The pagination component provides the following methods:

method name	describe
handleSizeChange	Triggered when the number of displayed items per page changes
handleCurrentChange	Triggered when the page number changes

Pagination component style

You can customize the style of the pagination component by modifying the following styles:

.pagination {
    
    
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.el-pagination__sizes {
    
    
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.el-pagination__jump {
    
    
  margin-left: 20px;
}

.el-pagination__total {
    
    
  margin-right: 20px;
}

Use pagination component

Using the pagination component is very simple. You only need to introduce our encapsulated Pagination component in your Vue component, and then use it in the template.

<template>
  <div class="page">
    <pagination
      :total="total"
      :page-size="pageSize"
      :current-page.sync="currentPage"
    />
  </div>
</template>

<script lang="ts">
import {
    
     defineComponent, ref } from 'vue'
import Pagination from '@/components/Pagination.vue'

export default defineComponent({
    
    
  name: 'Page',
  components: {
    
    
    Pagination,
  },
  setup() {
    
    
    const total = ref(1000)
    const pageSize = ref(10)
    const currentPage = ref(1)

    return {
    
    
      total,
      pageSize,
      currentPage,
    }
  },
})
</script>

Summarize

This article describes how to use Vue3, element-ui and TypeScript to encapsulate a global pagination component. You can modify the style and properties of the pagination component we provide according to your own needs.