深入理解 Vue3 Element Plus 的 el-pagination 组件

1.el-pagination功能介绍

el-pagination是一个 Vue.js 组件，它属于 Element UI 框架。Element UI 是一个基于 Vue 2.0 的桌面端组件库，它提供了一系列预设计的组件，用于快速构建高质量的前端应用程序。

什么是 el-pagination？
el-pagination是 Element UI 中的一个分页组件，用于在数据量较大时，将数据分割成多个页面显示，以提高页面的加载速度和用户体验。它允许用户通过点击页码或输入页码来浏览不同的数据集。

它的作用：
1.数据分页：将大量数据分割成多个页面，避免一次性加载过多数据导致页面响应缓慢。
2.导航控制：提供页面导航功能，如“上一页”、“下一页”、“跳转到”等。
3.自定义布局：允许开发者自定义分页组件的布局，以适应不同的设计需求。
4.响应式设计：组件能够适应不同的屏幕尺寸，保证在各种设备上都能正常显示。
5.事件处理：支持事件监听，如页面大小变化或当前页码变化，使得开发者可以根据用户操作进行相应的数据处理。

el-pagination组件通过提供简洁的 API 和灵活的配置选项，使得开发者能够轻松地在任何需要分页功能的 Vue 应用中实现它。详解介绍也可参考官网描述:Element Plus官网
 

2.使用示例

下面一段是Element Plus官网下的使用模板

<template>
  <div class="flex items-center mb-4">
    <el-radio-group v-model="size" class="mr-4">
      <el-radio-button value="default">default</el-radio-button>
      <el-radio-button value="large">large</el-radio-button>

      <el-radio-button value="small">small</el-radio-button>
    </el-radio-group>
    <div>
      background:
      <el-switch v-model="background" class="ml-2" />
    </div>
    <div class="ml-4">
      disabled: <el-switch v-model="disabled" class="ml-2" />
    </div>
  </div>

  <hr class="my-4" />

  <div class="demo-pagination-block">
    <div class="demonstration">Total item count</div>
    <el-pagination
      v-model:current-page="currentPage1"
      :page-size="100"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, prev, pager, next"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div class="demo-pagination-block">
    <div class="demonstration">Change page size</div>
    <el-pagination
      v-model:current-page="currentPage2"
      v-model:page-size="pageSize2"
      :page-sizes="[100, 200, 300, 400]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div class="demo-pagination-block">
    <div class="demonstration">Jump to</div>
    <el-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div class="demo-pagination-block">
    <div class="demonstration">All combined</div>
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>

 以下是界面UI效果

3.属性详解

v-model:current-page 这部分代码表示当前访问的代码页数，也就是展示的数据内容的第几页，可以动态绑定返回的参数结果中的当前坐在页数，如前端接收到一个params，可以动态绑定其中的pagenum，也就是 v-model:current-page="params.pagenum"

v-model:page-size 这部分代码表示当前页所可访问的最大条数据，比如一共有6条数据，设置page-size为5，那么第一页所可访问的最大条数据是5，第二页所可访问的数据是1(因为数据总共只有六条)，该部分可以动态绑定params中的pagesize，也就是v-model:page-size="params.pagesize" 

:page-sizes="[100,200,300,400]" 该部分代码表示可选择的当前页所访问的最大条数据，用户可以选择100，200，300，400作为当前页所访问的最大条数据，选择以后，该值会被赋值给params.pagesize

:background 这部分代码表示背景样式选择，如果为true，选择的时候底部会变为蓝色

layout="total,sizes,prev,pager,next,jumper" 这部分代码表示所展示的组件内容，其中

total表示展示当前数据的总页数

sizes表示展示让用户选择每一页所展示的最大数据

prev表示往前一页

pager表示展示了当前所在页数

next表示往后一页

jumper表示跳转到用户所输入的具体某一页

效果如下图所展示：

:total="total" 动态绑定了total总页数，表示展示了当前数据的总共页数，前端接收到数据以后可以单独定义一个total来接收数据总页数，可以配合v-show来展示，当total为0是，v-show为false，该分页框就不会进行展示

@size-change="onSizeChange" 表示当每一页的最大展示数据发生变化时会调用onSizeChange方法

@current-change="onCurrentChange" 表示当前页发生变化时会调用onCurrentChange方法,上述两个方法可以重新调用getList()方法来重新刷新展示数据

以上就是本次关于el-pagination的组件理解，有疑问或者歧义的地方欢迎小伙伴们在评论区留言与指正~