antdvuetable组件实现分页效果1、<a-table></a-table>标签中添加属性 :pagination="pagination"
2、data中设置pagination
pagination: {
current: 1,
pageSize: 10,
showSizeChanger: true,
total: al,
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 = {antdesignvuetable动态表头
rows: this.pagination.pageSize,
page: this.pagination.current,
}
},
pageChange(page, val) {
this.loading = true
this.pagination.current = page
const params = {
rows: this.pagination.pageSize,
page: this.pagination.current,
}
},
4、获取列表数据后
this.data = res && res.hasOwnProperty('rows') ? ws : [] al = res && res.hasOwnProperty('total') ? al : 0 al = al
完成分页
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论