博客

<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样式。