标签：pagination vue pageSize res current params antd table total

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

2、data中设置pagination

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 方法中

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

完成分页

————————————————
版权声明：本文为CSDN博主「诗yu远方」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/queen_css/article/details/120864812

标签：pagination,vue,pageSize,res,current,params,antd,table,total
来源： https://www.cnblogs.com/panwudi/p/15767585.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。