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+elementui 实现上传文件/导入文件的功能示例详解

    vue+elementui 实现上传文件/导入文件的功能示例详解

    文章介绍了如何使用Vue和Element UI实现上传文件和导入文件的功能,主要内容包括:上传组件的使用、data中的数据存储、methods中的方法(选择文件、点击确定上传文件、删除文件),文章还提供了相关链接供进一步学习,感兴趣的朋友一起看看吧
    2025-03-03
  • 解决Antd Table组件表头不对齐的问题

    解决Antd Table组件表头不对齐的问题

    这篇文章主要介绍了解决Antd Table组件表头不对齐的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue中接口域名配置为全局变量的实现方法

    vue中接口域名配置为全局变量的实现方法

    今天小编就为大家分享一篇vue中接口域名配置为全局变量的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 关于element中el-cascader的使用方式

    关于element中el-cascader的使用方式

    这篇文章主要介绍了关于element中el-cascader的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue.set() this.$set()引发的视图更新思考及注意事项

    Vue.set() this.$set()引发的视图更新思考及注意事项

    this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用。这篇文章主要介绍了Vue.set() this.$set()引发的视图更新思考及注意事项,需要的朋友可以参考下
    2018-08-08
  • Vue使用vue-pdf实现PDF文件预览

    Vue使用vue-pdf实现PDF文件预览

    这篇文章主要为大家详细介绍了Vue如何使用vue-pdf实现PDF文件预览的功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的可以了解一下
    2023-03-03
  • Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

    Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

    这篇文章主要介绍了Vue插槽_特殊特性slot,slot-scope与指令v-slot说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue第三方库中存在扩展运算符报错问题的解决方案

    vue第三方库中存在扩展运算符报错问题的解决方案

    这篇文章主要介绍了vue第三方库中存在扩展运算符报错问题,本文给大家分享解决方案,通过结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue注册组件的几种方式总结

    vue注册组件的几种方式总结

    下面小编就为大家分享一篇vue注册组件的几种方式总结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue 倒计时结束跳转页面实现代码

    vue 倒计时结束跳转页面实现代码

    在商场大家经常看到停车收费倒计时支付页面,今天小编通过本文给大家分享vue 倒计时结束跳转页面功能,感兴趣的朋友一起看看吧
    2023-10-10

最新评论