vue3 element-plus 分页组件样式需要实现自定义这里将实现代码整理出来。

<div class="paging">
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
  >
  </el-pagination>
</div>

css代码

.paging {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

}

:deep(.paging) {
  .el-pagination .btn-next, .el-pagination .btn-prev {
    background: none;
    color: #fff;
    //width: 26px;
    //height: 26px;
    border: 1px solid #0a4273;
    box-sizing: border-box;
  }

  .el-pagination button {
    padding: 0 !important;
  }

  .el-pager li {

    margin: 0 5px;
    border: 1px solid #0a4273;
    box-sizing: border-box;
    background: none;
    font-size: 14px;
    font-family: MiSans;
    font-weight: 400;
    color: #FFFFFF;
  }

  .el-pager li.is-active {
    border: 1px solid #0a4273;
    background: #0a4273;
  }

  .el-pagination__total {
    color: #FFFFFF;
  }
}

js

handleSizeChange(val) {
  this.pageSize = val;
  this.getData();
},
handleCurrentChange(val) {
  this.pageNum = val;
  this.getData();
},

vue3 element-plus其他插件修改实例

vue3 element-plus 组件修改实例汇总

项目应用

智慧工地监管系统