本篇内容介绍了“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)
后来看了下官方文档,发现新的版本 已经舍弃了 pageNo,改用 current,上面的问题在版本升级后也没再出现,我之前使用的版本是"ant-design-vue": "~1.3.8",现在官网的版本是1.5.3,如果有遇到类似问题的小伙伴可以升级下版本试试.
onSizeChange(current, pageSize) {
this.pagination.current= 1
this.pagination.pageSize = pageSize
this.getList()
}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怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/dengfenglai825/article/details/105774314
