关于改造 element ui的分页插件部分

1 element ui 的分页 插件ui

图一

  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>

图二 是我们要是要实现的 分页 效果 我们 用图一的 ui 改造一下 就 ok l

 <el-pagination prev-text="上一页" next-text="下一页" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="page_size"
        :page-size="components.pagination.pageSize" layout=" prev, pager,next,total, sizes,jumper"
        :total="pagination.total">
      </el-pagination>

注意

注意点一

我们会认为 element ui 提供的 上下页 没有 字体 只有图标 其实 这是错误的 element ui 提供了上下 页 图标 改字体的 如下图 就这样就可以 把 图标换成 字体

注意点二 下面的是我 找到的 element ui 改 分页插件的一些 class

/* 分页
 */
 /* 上一页的css  */
 .btn-prev{
  width: 100px !important;
  height: 48px !important;
  border: 1px solid #64DEFB !important;
  border-radius: 2px;
  margin: 0%;
  padding: 0px;
  background-color:#081243 !important;
  color: #255676 !important;
  font-weight: 600 ;
  margin-right: 10px !important;
 }
 /* 下一页的css  */
 .btn-next{
  width: 100px !important;
  height: 48px !important;
  border: 1px solid #64DEFB !important;
  border-radius: 2px;
  margin: 0%;
  padding: 0px;
  background-color:#081243 !important;
  color: #255676;
  margin-left: 10px !important;
 }
 /* 中间页数的css  */
 .el-pager li{
   background-color: #050F23;
  width: 48px;
  height: 48px;
  border: 1px solid #64DEFB;
  font-size: 18px;
 }
 /* 页码数字 */
 .number{
  width: 48px !important;
  height: 48px !important;
  background: #64DEFB;
  line-height: 48px!important;
  
 }
 /* 当前页的 提示  */
 .el-pager li.active{
   background-color: #64DEFB;
   color: white;
 }
 /*  总条数的 样式css   */
.el-pagination__total{
  /* background-color: #050F23; */
  /* width: 48px !important; */
  height: 48px !important;
  text-align: center;
  /* border: 1px solid #64DEFB; */
  font-size: 18px !important;
  margin-top: 10px;
  margin-left: 10px;
}
/* 每页的 展示条数 的 css   */
.el-pagination__sizes >input{
  background-color: #081243;
  width: 100px !important;
  height: 48px !important;
}
.el-pagination .el-select .el-input .el-input__inner{
  background-color: #081243;
  width: 100px !important;
  height: 48px !important;
}
/* 前往的 css  */
.el-pagination__jump{
font-size: 20px !important;
margin-left: 10px!important;
/* margin-right: 10px !important; */
}
/* 前往的 页码 css   */
.el-pagination__editor.el-input>input{
  background-color: #081243;
  width: 100px !important;
  height: 48px !important;
  margin-left: 10px !important;
}

注意点三 其实 element ui 的 插件的 功能是可以 换位置 的 如下图 红色框中的 功能是可以换位置的