目录
业务场景
官方链接
实现效果
使用框架
代码展示
template代码
script代码
变量定义
事件定义
handleSizeChange事件--实现每页条数改变表格动态变化
handleCurrentChange事件--切换页码
css代码
完整代码
总结
业务场景
当表格中的数据量如果非常庞大的时候我们不可能让数据整个全部一下展示出来，导致用户需要无限的往下滚动鼠标，给用户造成不清楚到底有多少数据的一个现象，让用户产生看不到头的焦躁心理。这时候我们可以借助分页器去实现数据的分页效果，根据页数和每页条数去实现真分页。
这个在项目中是经常使用到的一种场景，今天我来分享分享我们具体的实现和需要注意的一些点
官方链接
Pagination 分页：Pagination 分页 | Element Plus
实现效果
这篇博客要实现的是课程和班级的一个绑定关系，当页面加载之后给课程和班级下拉框一个默认值，通过切换课程班级下拉框中的选项之后班级下拉框中的选项也随之变换成，当前选中课程下的所有班级名
使用框架
Vue3+element-plus(1.2.0-beta.5)
流程
动态切换每页条数：
- 在el-pagination组件上绑定一个变量，例如
pageSize，用于表示每页显示的条数。 - 使用
@change事件监听每页条数的变化，当每页条数改变时，触发相应的方法。 - 在方法中，更新
pageSize变量的值，并重新获取数据。
动态切换每页条数：
- 在el-pagination组件上绑定一个变量，例如
pageSize，用于表示每页显示的条数。 - 使用
@change事件监听每页条数的变化，当每页条数改变时，触发相应的方法。 - 在方法中，更新
pageSize变量的值，并重新获取数据。
代码展示
说明：在本篇博客中我重点分享分页器的时候，关于el-table表格可以参考这篇博客：el-table 列的动态显示与隐藏_吃豆子的恐龙的博客-CSDN博客
template代码
<!-- 分页器 -->
<div class="demo-pagination-block">
<span class="demo-pagination-block allTotal">共{{ total }}条</span>
<el-config-provider :locale="locale">
<el-pagination
:total="total"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[30, 50, 100]"
:small="small"
:disabled="disabled"
:background="background"
layout="sizes, prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-config-provider>
</div>script代码
变量定义
var total = ref(0); //总条数
// 当前页数
const currentPage = ref(1);
//每页显示条目个数
const pageSize = ref(30);
//是否使用小型分页样式
const small = ref(false);
//是否为分页按钮添加背景色
const background = ref(false);
//是否禁用分页
const disabled = ref(false);事件定义
handleSizeChange事件--实现每页条数改变表格动态变化
//每页显示条数改变
const handleSizeChange = (val) => {
searchContent.value = "";
pageSize.value = val;
currentPage.value = currentPage.value;
};handleCurrentChange事件--切换页码
//当前页变动
const handleCurrentChange = (val) => {
pageSize.value = pageSize.value;
currentPage.value = val;
studentData(classID.value, courseID.value, currentPage.value, pageSize.value);
};css代码
.demo-pagination-block {
display: inline-block;
position: relative;
}
.allTotal {
position: absolute;
left: -4em;
top: 7px;
color: #606266;
font-size: 14px;
}完整代码
<template>
<!-- 分页器 -->
<div class="demo-pagination-block">
<span class="demo-pagination-block allTotal">共{{ total }}条</span>
<el-config-provider :locale="locale">
<el-pagination
:total="total"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[30, 50, 100]"
:small="small"
:disabled="disabled"
:background="background"
layout="sizes, prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-config-provider>
</div>
</template>
<script>
import { reactive, ref, onMounted } from "vue";
export default {
components: {
},
setup() {
//总条数
var total = ref(0);
// 当前页数
const currentPage = ref(1);
//每页显示条目个数
const pageSize = ref(30);
//是否使用小型分页样式
const small = ref(false);
//是否为分页按钮添加背景色
const background = ref(false);
//是否禁用分页
const disabled = ref(false);
//每页显示条数改变
const handleSizeChange = (val) => {
searchContent.value = "";
pageSize.value = val;
currentPage.value = currentPage.value;
};
//当前页变动
const handleCurrentChange = (val) => {
pageSize.value = pageSize.value;
currentPage.value = val;
studentData(classID.value, courseID.value, currentPage.value, pageSize.value);
};
return {
total,
currentPage,
pageSize,
small,
background,
disabled,
handleSizeChange,
handleCurrentChange,
};
},
};
</script>
<style>
.demo-pagination-block {
display: inline-block;
position: relative;
}
.allTotal {
position: absolute;
left: -4em;
top: 7px;
color: #606266;
font-size: 14px;
}
</style>关于当前页面的实现可以参考如下博客：
el-table：el-table 列的动态显示与隐藏_吃豆子的恐龙的博客-CSDN博客
el-Dropdown：http://t.csdn.cn/jFp2f文章来源：https://www.toymoban.com/news/detail-631223.html
总结
多看官方文档，我们遇到的很多问题其实文档中都有详细说明！文章来源地址https://www.toymoban.com/news/detail-631223.html
如果有想要交流的内容欢迎在评论区进行留言，如果这篇文档受到了您的喜欢那就留下你点赞、收藏脚印支持一下博主~
到了这里，关于el-pagination 动态切换每页条数、页数切换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![ElementPlusError:[ElPagination] 你使用了一些已被废弃的用法，请参考 el-pagination 的官方文档](https://imgs.yssmx.com/Uploads/2024/01/418852-1.png)
