框架自带颜色
修改后样式
代码
<!-- 分页 -->
<div class="pagination">
<span style="font-size: 14px; color: #000000; margin-right: 8px"
>共 {{ total }} 条记录, 当前显示第 {{ transfers.page }} 页</span
>
<el-pagination
:background="isBackground" //修改背景颜色
@current-change="handleCurrentChange"
:current-page.sync="transfers.page"
:page-size="10"
layout=" prev, pager, next"
:total="total"
></el-pagination>
</div>
// data中定义
data({
isBackground:true //设置为true
})
css样式代码
// 分页 前文字+分页
.pagination {
margin-top: 23px;
text-align: center;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
分页框修改
<style>
/* 修改分页样式 */
.el-pagination.is-background .el-pager li {
/* width: 32px;
height: 32px !important;
line-height: 32px; */
/* font-family: ".PingFang SC"; */
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
background-color: #fff;
color: #000000;
border: 1px solid #e5e5ea;
}
/* 激活后的样式 */
.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #ffffff;
color: #0366ed;
border: 1px solid #0366ed;
text-align: center;
}
/* 修改左右箭头样式 */
.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
/* background-color: red; */
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
background-color: #fff;
color: #e5e5ea;
border: 1px solid #e5e5ea;
}
</style>
部分还会出现宽高不是正方形的问题 可以这样修改
/* 解决分页小问题 */
.el-pager {
height: 35.5px !important;
}
.number,
.el-icon {
height: 35.5px !important;
line-height: 35.5px !important;
}