onSizeChange 后当前页问题
首先,大致描述一下出现这个问题的情形:
data(){
return {
pagination: {
pageNo: 1,
pageSize: 5,
total:0,
showSizeChanger: true,
pageSizeOptions: ['5', '10', '50'],
showTotal: total => `共 ${total} 条`,
onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
onChange:(page,pageSize)=> this.onPageChange(page, pageSize)
},
}
},
methods: {
onPageChange(page, pageSize) {
this.pagination.pageNo = page
this.getList()
},
onSizeChange(current, pageSize) {
this.pagination.pageNo = 1
this.pagination.pageSize = pageSize
this.getList()
}
}
页面加载数据,pageNo
是 1
, pageSize
是 5
,假如接口返回 total
是 12
,这时分页有3
页,选择第2
页,然后改变每页条数为10
,onSizeChange
里面设置了this.pagination.pageNo = 1
,但是得到的结果是 当前页在第2
页.
原因分析
自己百度查找并没有找到解决的方法,还希望哪个高手给指点下(不知道是不是 antd的bug)
解决方法: 升级 antd 版本
后来看了下官方文档,发现新的版本 已经舍弃了 pageNo
,改用 current
,上面的问题在版本升级后也没再出现,我之前使用的版本是"ant-design-vue": "~1.3.8"
,现在官网的版本是1.5.3
,如果有遇到类似问题的小伙伴可以升级下版本试试.
onSizeChange(current, pageSize) {
this.pagination.current= 1
this.pagination.pageSize = pageSize
this.getList()
}