1、設(shè)置 pagination

<a-table class="tableDiv" bordered :dataSource="dataSource" :columns="columns" :pagination="pagination" />

2、自定義 pagination

data () {columns: [{title: '序號',dataIndex: 'num',key: 'num',width: 80,customRender: (text, record, index) => `${(this.pagination.defaultCurrent - 1) * this.pagination.defaultPageSize + (index + 1)}`,fixed: 'left',align: 'center'}],pagination: {defaultCurrent: 1, // 默認(rèn)當(dāng)前頁數(shù)defaultPageSize: 10, // 默認(rèn)當(dāng)前頁顯示數(shù)據(jù)的大小total: 0, // 總數(shù)showSizeChanger: true,pageSizeOptions: ['10', '20', '30', '50'],showTotal: (total) => '共' + ` ${total} ` + '項',buildOptionText: (size) => {return Number(size.value) + ' 項' + '/' + '頁'} }

總結(jié)

以上是生活随笔為你收集整理的Ant Design For Vue 分页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。