分页.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();
}
}
