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; }

總結

以上是生活随笔為你收集整理的ElementUI中分页Pagination 样式的修改（分页组件的封装）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。