问题情况如下:
分页器中页数显示 1条/页,但是表格中数据有5条。这个分页器失效了嘛?
代码奉上:
<div class="pagination-container">
<el-pagination
:current-page.sync="listQuery.page"
:page-sizes="[1,20,30,50]"
:page-size.sync="listQuery.pageSize"
:total="total"
background
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
script
部分代码
data(){
return{
listQuery: {
page: 1,
pageSize: 10,
param: {
bannerName: undefined,
bannerType: undefined
}
},
}
}
methods:{
handleSizeChange(val) {
this.listQuery.pageSize = val;
this.getPage();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.getPage();
},
getPage(){
//调用接口获取数据
}
}
跟官网中分页器的使用,感觉没啥问题,但是就是出现上图中的问题。分页器失效了???
饿了么团队不应该会出现这种问题的。。。
检索了一番,终于被我发现了问题所在:
页面初始化时,pagesize是10,但是page-sizes的数组中没有这个10,就会出现分页器失效的问题。
如果改成一下:
<div class="pagination-container">
<el-pagination
:current-page.sync="listQuery.page"
:page-sizes="[1,10,30,50]"
:page-size.sync="listQuery.pageSize"
:total="total"
background
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
效果如下:
搞定!
本文地址:https://blog.csdn.net/yehaocheng520/article/details/107530139
如对本文有疑问, 点击进行留言回复!!
Asp.Net Core 3.1 Web Api 返回数据字段被转换为小驼峰格式的解决办法
已知两点经纬度,计算偏移角(正北为0,顺时针为正,逆时针为负)
解决问题“Could not load file or assembly xxxxxxx or one of its dependencies”
网友评论