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

 更新时间:2023年04月21日 09:31:59   作者:dengfenglai825  
这篇文章主要介绍了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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中进行路由懒加载的示例详解

    Vue中进行路由懒加载的示例详解

    路由懒加载是一种优化Vue应用程序性能的技术,本文介绍了Vue中如何进行路由懒加载,包括使用Vue异步组件和Webpack代码分割,需要的朋友可以参考下
    2023-06-06
  • 详解Vue与VueComponent的关系

    详解Vue与VueComponent的关系

    这篇文章主要为大家介绍了Vue与VueComponent的关系,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • Vue ElementUI table实现表格斜线分隔线

    Vue ElementUI table实现表格斜线分隔线

    这篇文章主要为大家详细介绍了Vue ElementUI table实现表格斜线分隔线,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue和react中props变化后如何修改state

    vue和react中props变化后如何修改state

    这篇文章主要介绍了vue和react中props变化后如何修改state,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 如何区分vue中的v-show 与 v-if

    如何区分vue中的v-show 与 v-if

    这篇文章主要介绍了如何区分vue中的v-show 与 v-if ,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-09-09
  • vue3中的ref,toRef,toRefs三个的作用使用小结

    vue3中的ref,toRef,toRefs三个的作用使用小结

    Vue3中ref、reactive、toRef、toRefs都是与响应式数据相关的,就此做一份笔记作为区别,本文重点给大家讲解vue3中的ref,toRef,toRefs三个是干嘛的,有什么作用,感兴趣的朋友跟随小编一起看看吧
    2022-11-11
  • 使用v-memo缓存模板子树提高应用性能详解

    使用v-memo缓存模板子树提高应用性能详解

    这篇文章主要为大家介绍了使用v-memo缓存模板子树提高应用性能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue mint-ui tabbar变组件使用

    vue mint-ui tabbar变组件使用

    这篇文章主要介绍了vue mint-ui tabbar变组件使用方法及实例代码,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • 浅析Visual Studio Code断点调试Vue

    浅析Visual Studio Code断点调试Vue

    本篇文章给大家总结了Visual Studio Code断点调试Vue的方法以及心得分享,需要的朋友参考学习下。
    2018-02-02
  • element-ui table行点击获取行索引(index)并利用索引更换行顺序

    element-ui table行点击获取行索引(index)并利用索引更换行顺序

    这篇文章主要介绍了element-ui table行点击获取行索引(index)并利用索引更换行顺序,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02

最新评论