ant-design-vue table分页onShowSizeChange后的pageNo怎么解决

本篇内容介绍了“ant-design-vue table分页onShowSizeChange后的pageNo怎么解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

ant-design-vue table分页onShowSizeChange后的pageNo

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

vue AntDesign table分页

1、<a-table></a-table>标签中添加属性 :pagination="pagination"

 2、data中设置pagination和total

data(){
    return {
        totai:0, //总条数
        pagination: {
            current: 1,//页码
            pageSize: 10,//条数
            showSizeChanger: true,
            total: this.total,
            pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
            showTotal: (total) => `共 ${total} 条数据`,
            onShowSizeChange: this.pageSizeChange,
            onChange: this.pageChange,
          },
    }
}

3、methods 方法中

methods:{
    pageSizeChange(val, pageNum) {
      this.loading = true
      this.pagination.pageSize = pageNum
      this.pagination.current = 1
      const params = {
        rows: this.pagination.pageSize,
        page: this.pagination.current,
      }
      this.getTemplateLibraryList(params)   //获取列表数据
    },
    pageChange(page, val) {
      this.loading = true
      this.pagination.current = page
      const params = {
        rows: this.pagination.pageSize,
        page: this.pagination.current,
      }
      this.getTemplateLibraryList(params) //获取列表数据
    },
}

4、获取列表数据后

this.data = res && res.hasOwnProperty('rows') ? res.rows : []
this.total = res && res.hasOwnProperty('total') ? res.total : 0
this.pagination.total = this.total

“ant-design-vue table分页onShowSizeChange后的pageNo怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！