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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM