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()
   }
}

页面加载数据,pageNo1, pageSize5,假如接口返回 total12,这时分页有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()
 }
Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐