element-ui分页器

组件样式

修改样式

代码

<el-pagination
  background
  layout="prev, pager, next"
  :total="page.total"
  :page-size="page.pageSize"
>
el-pagination>

.el-pagination {
  margin: 0 0 25px;
  /deep/ {
    .el-pager {
      width: 75%;
      text-align: center;
    }
    .el-pager li {
      border-radius: 50%;
    }
    .btn-next, .btn-prev {
      min-width: auto !important;
      background-color: transparent;  //背景透明
      display: flex;
      align-items: center;
    }
    //伪元素
    .btn-prev:after {
      content: "上一页";
    }
    .btn-next:before {
      content: "下一页";
    }
  }
}