公司项目、UI要求更改Element分页组件的样式,所以也是绞尽脑汁解决了。
废话不多说、直接上代码,照着改即可。
---------------------------------------------------------------------------------------------------------------------------------
引用组件
<div class="pagination" v-if="bannerList.length > 0">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="queryParams.page"
:page-size="queryParams.limit"
layout="prev,pager, next"
:total="total"
background
>
</el-pagination>
</div>
<div v-if="bannerList.length <= 0" class="empty">
<span>暂无数据!</span>
</div>
样式
<!-- 修改分页背景色 -->
<style>
.el-pagination.is-background .el-pager li:not(.disabled).active {
line-height: 40px;
width: 40px;
font-weight: 400;
font-size: 16px;
height: 40px;
border-radius: 4px;
background-color: #3e7eff;
color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled) {
line-height: 40px;
font-weight: 400;
font-size: 16px;
width: 40px;
height: 40px;
background: #e4e8ee;
border-radius: 4px;
color: #99a1a7;
}
.el-pagination .btn-next {
width: 40px !important;
line-height: 40px !important;
height: 40px !important;
color: #99a1a7 !important;
background: #e4e8ee !important;
border-radius: 4px !important;
}
.el-pagination .btn-prev {
width: 40px !important;
line-height: 40px !important;
height: 40px !important;
color: #99a1a7 !important;
background: #e4e8ee !important;
border-radius: 4px !important;
}
</style>