antd vue table元件實現分頁效果
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