目录
业务场景
官方链接
实现效果
使用框架
代码展示
template代码
script代码
变量定义
事件定义
handleSizeChange事件--实现每页条数改变表格动态变化
handleCurrentChange事件--切换页码
css代码
完整代码
总结
业务场景
当表格中的数据量如果非常庞大的时候我们不可能让数据整个全部一下展示出来，导致用户需要无限的往下滚动鼠标，给用户造成不清楚到底有多少数据的一个现象，让用户产生看不到头的焦躁心理。这时候我们可以借助分页器去实现数据的分页效果，根据页数和每页条数去实现真分页。
这个在项目中是经常使用到的一种场景，今天我来分享分享我们具体的实现和需要注意的一些点
官方链接
Pagination 分页：Pagination 分页 | Element Plus
实现效果
这篇博客要实现的是课程和班级的一个绑定关系，当页面加载之后给课程和班级下拉框一个默认值，通过切换课程班级下拉框中的选项之后班级下拉框中的选项也随之变换成，当前选中课程下的所有班级名
使用框架
Vue3+element-plus(1.2.0-beta.5)
代码展示
说明：在本篇博客中我重点分享分页器的时候，关于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
总结
多看官方文档，我们遇到的很多问题其实文档中都有详细说明。
