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的组件理解,有疑问或者歧义的地方欢迎小伙伴们在评论区留言与指正~