element分页

分页.png

style:

/*分页样式*/
.roleCon{
  margin-top: 20px;
}
.fenye{
  margin-top: 10px;
}
.pageSize{
  font-size: 13px;
  color: #312f2f;
  float: right;
}
.pageSize input{
  width: 33px;
  height: 28px;
  padding: 0 2px 0 14px;
  border: 1px solid gainsboro;
  border-radius: 5px;
  text-align: center;
  color: #312f2f;
}
.pageSize button{
  margin-left: 20px;
  border: none;
  background: #1E90FF;
  border-radius: 3px;
  color: white;
  font-weight: 600;
  height: 28px;
}
.el-pagination__total{
  margin-left: 20px;
}

template:

  <div class="clearfix  roleCon">
      <div class="pageSize">
        <span>每页显示</span>
        <input type="number" v-model="pageSize">
        <span>条</span>
        <button @click="go">go</button>
      </div>
      <div class="block right paging">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          layout=" prev, pager, next, jumper, total"
          :page-size="pageSize"
          :total="total">
        </el-pagination>
      </div>
    </div>

data:

//分页
        total:10,
        pageSize:10,
        currentPage: 1,

methods:

//分页
      handleCurrentChange(val) {
        this.currentPage=val;
        this.getClassPhotoList();//getClassPhotoList()这个是我掉后台接口用的
      },
      handleSizeChange(val) {
        this.pageSize=val;
      },
      go(){
        this.getClassPhotoList();
      }
    }