Element分页组件el-pagination修改样式

JavaScript还有Ze11

已于 2024-04-10 16:27:56 修改

阅读量425

点赞数 2

分类专栏： BUG修复地文章标签： javascript vue.js css elementui 前端

于 2024-04-10 16:25:07 首次发布

本文链接：https://blog.csdn.net/XiaomeiGuiSnJs/article/details/137601448

版权

BUG修复地专栏收录该内容

5 篇文章 0 订阅

订阅专栏

公司项目、UI要求更改Element分页组件的样式，所以也是绞尽脑汁解决了。
废话不多说、直接上代码，照着改即可。

---------------------------------------------------------------------------------------------------------------------------------

引用组件

      <div class="pagination" v-if="bannerList.length > 0">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.limit"
          layout="prev,pager, next"
          :total="total"
          background
        >
        </el-pagination>
      </div>
      <div v-if="bannerList.length <= 0" class="empty">
        <span>暂无数据！</span>
      </div>

样式

<!-- 修改分页背景色 -->
<style>
.el-pagination.is-background .el-pager li:not(.disabled).active {
  line-height: 40px;
  width: 40px;
  font-weight: 400;
  font-size: 16px;
  height: 40px;
  border-radius: 4px;
  background-color: #3e7eff;
  color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled) {
  line-height: 40px;
  font-weight: 400;
  font-size: 16px;
  width: 40px;
  height: 40px;
  background: #e4e8ee;
  border-radius: 4px;
  color: #99a1a7;
}
.el-pagination .btn-next {
  width: 40px !important;
  line-height: 40px !important;
  height: 40px !important;
  color: #99a1a7 !important;
  background: #e4e8ee !important;
  border-radius: 4px !important;
}
.el-pagination .btn-prev {
  width: 40px !important;
  line-height: 40px !important;
  height: 40px !important;
  color: #99a1a7 !important;
  background: #e4e8ee !important;
  border-radius: 4px !important;
}
</style>