对element中Pagination 分页默认样式的的修改
pagination原本样式
## 最后的效果图
改变pagination的中的附加功能的位置使其分散两边
原本代码
<div class="clearfix">
<el-pagination
class="pagination"
background
:current-page="currentPage4"
:page-sizes="[10, 20, 30, 40]"
:page-size="10"
layout="sizes,total,jumper,prev,pager,next"
:total="1000">
</el-pagination>
</div>
我是先使整个分页组件使用text-align让所有的附加组件向右对齐,如下图
然后再使前三个附加组件向左浮动,以及修改默认附件组件样式
<style scoped lang="scss">
.pagination {
margin-top: 20px;
text-align: right;
}
/deep/ .pagination .el-pagination__sizes {
float: left;
}
/deep/ .pagination .el-pagination__total {
float: left;
}
/deep/ .pagination .el-pagination__jump {
float: left;
}
</style>
对element默认样式更改需要在css选择器前加/deep/