1.实现效果:
2.实现代码:
<template>
<div :class="{'hidden':hidden}" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:pager-count="pagerCount"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>
elemen-ui.scss文件中覆盖样式:
//圆形背景的大小
.el-pagination.is-background .el-pager li{
width: 20px;
min-width:20px;
height: 20px;
line-height: 20px;
margin-top: 4px;
font-size: 8px;
}
//圆形背景设置
.el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #681AC3;
// width: 20px;
// min-width:20px;
// height: 20px;
// line-height: 20px;
}
//圆形边角设置
.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li{
border-radius: 50%;
background-color: #fff;
}