对element-ui中的el-pagination分页的背景样式修改

最新推荐文章于 2025-08-20 09:45:58 发布

原创最新推荐文章于 2025-08-20 09:45:58 发布 · 9.4k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #前端

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

element-ui

1 篇文章

订阅专栏

本文介绍如何在Vue项目中仅针对特定页面的el-pagination组件进行样式定制，避免样式污染，详细解释了使用独一无二的class类进行包裹的方法。

<el-pagination
        class="msg-pagination-container"
        :background="isBackground"    //将background设置为true便可以修改分页的背景样式
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="Lists.length"
        @current-change="handleCurrentChange"
      />

data() {
    return {
        isBackground: true
    }
}

<style>
  .msg-pagination-container.is-background .el-pager li {
    /*对页数的样式进行修改*/
    background-color: #10263c;
    color: #FFF;
  }
  .msg-pagination-container.is-background .btn-next {
    /*对下一页的按钮样式进行修改*/
    background-color: #10263c;
    color: #FFF;
  }
  .msg-pagination-container.is-background .btn-prev {
    /*对上一页的按钮样式进行修改*/
    background-color: #10263c;
    color: #FFF;
  }
  .msg-pagination-container.is-background .el-pager li:not(.disabled).active {
    /*当前选中页数的样式进行修改*/
    background-color: #446cff;
    color: #FFF;
  }
</style>

在vue中，如果只想修改当前页面的el-pagination的样式，css必须通过一个独一无二的class类进行包裹，不然会造成全局污染，影响其他页面的el-pagination样式。