设置element 分页的背景色和选中颜色

最新推荐文章于 2023-12-27 11:36:43 发布

cyz_hd

最新推荐文章于 2023-12-27 11:36:43 发布

阅读量1.7k

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/cyz_hd/article/details/118089452

版权

element 分页

<div class="paging">
          <el-pagination
            small
            :current-page.sync="start"
            :pager-count="5"
            layout="prev, pager, next"
            :total="total"
            @current-change="changeCurrent"
          >
          </el-pagination>
        </div>

css

  .paging {
        margin-top: 10px ;
        height: 45px;
        /*width: 312px;*/
        ::v-deep {
          .el-pagination {
            height: 45px;
            text-align: center;
            /*width: 100px;*/
          }
          .el-pagination .el-pager li:not(.disabled) {
            background-color: rgba(
              38,
              67,
              123,
              0.1
            ); // 进行修改未选中背景和字体
            color: #fff;
          }
          .el-pagination .el-pager li:not(.disabled).active {
            background-color: rgba(
              38,
              67,
              123,
              0.1
            ); // 进行修改选中项背景和字体
            color: #04bdf5;
          }
          .el-pagination .btn-prev,
          .btn-next {
            background-color: rgba(99, 135, 206, 0); // 进行修改选中项背景和字体
            color: #04bdf5;
          }
        }
      }