修改el-pagination分页样式

框架自带颜色

 修改后样式

 代码

  
      <div class="pagination">
        <span style="font-size: 14px; color: #000000; margin-right: 8px"
          >共 {{ total }} 条记录, 当前显示第 {{ transfers.page }} 页
        >
        <el-pagination
 
          :background="isBackground"    //修改背景颜色
          @current-change="handleCurrentChange"
          :current-page.sync="transfers.page"
          :page-size="10"
          layout=" prev, pager, next"
          :total="total"
        >el-pagination>
      div>
 
 
// data中定义
 
data({
     isBackground:true   //设置为true
    })

css样式代码

//  分页 前文字+分页
.pagination {
  margin-top: 23px;
  text-align: center;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

分页框修改

部分还会出现宽高不是正方形的问题   可以这样修改

/* 解决分页小问题 */
.el-pager {
  height: 35.5px !important;
}
.number,
.el-icon {
  height: 35.5px !important;
  line-height: 35.5px !important;
}