目录
1.组件概述
分页组件不用说就是分页显示数据的,怎么使用它呢?先从渲染效果来看吧
<div class="blocka">
<el-pagination
:background="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="formLibsearch.pageNum"
:page-sizes="[2, 5, 10, 20]"
:page-size="formLibsearch.pageSize"
layout="total,prev, pager, next, sizes,jumper"
:total="healthEdulist.length"
>
</el-pagination>
</div>
1.background
第一个background用于是否为分页按钮添加背景色,不是很清楚对吧,他默认是不开启的
效果是这样的,添加了之后我感觉就是可以改样式的,加上之后改了样式后
//分页样式
.blocka {
display: flex;
justify-content: flex-end;
align-items: center;
height: 25px;
margin-bottom: 10px;
padding: 32px 16px;
background: #fff;
}
.blocka ::v-deep .el-pagination.is-background .btn-prev,
.blocka ::v-deep .el-pagination.is-background .btn-next,
.blocka ::v-deep .el-pagination.is-background .el-pager li {
margin: 0 5px;
background-color: #fff;
color: #606266;
min-width: 30px;
border-radius: 2px;
border: 1px solid lightgrey;
}
.blocka
::v-deep
.el-pagination.is-background
.el-pager
li.active {
background: #1890ff;
color: #ffffff;
}
主要还是看需求吧 ,样式仅供参考
2.@size-change
@size-change="handleSizeChange"是改变每页显示数触发函数
3.@current-change
@current-change="handleCurrentChange"是改变当前页码数时触发函数
4.:current-page
:current-page="queryParams.pageNum"是当前要显示的页码,当然动态改变页码的话要动态绑定
5.:page-sizes
:page-sizes="[2, 5, 10, 20]"为可选每页显示的数据量
6.:page-size
:page-size="queryParams.pageSize"是当前每页显示的数据量
7.layout
layout="total,prev, pager, next, sizes,jumper"这个就有点意思了,我写的里面的都是完整版的,每个参数对应一个模块
这里完全可以根据自己的需求增删参数,需要哪些就写哪些参数,当然参数的排序方式决定了你的页面内容显示顺序
8.:total
:total="totalLength"总的数据条数
2.组件使用
怎么使用这个组件呢,记住一定要动态绑定属性,total和page-sizes可以默认值,和后端配合
handleSizeChange(val) {
this.queryParams.pageSize = val
this.getTotalList()
},
handleCurrentChange(val) {
this.queryParams.pageNum = val
this.getTotalList()
},
每次改变pageSize和pageNum都要更新data中相应的pageSize和pageNum
希望对你有用