表格部分

<a-table:row-selection="rowSelection" :columns="columns":data-source="data"class="components-table-demo-nested"@change="onChangeTable":scroll="{ x:1600 ,y:500}":pagination="pagination" :locale="locale"></a-table>

2.分頁

<div class="paginationBox"><spanstyle="float:left;margin-top:5px;font-size:14px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(144,151,167,1)">共{{total}}項</span><a-paginationshow-less-itemsclass="pagination"show-quick-jumpershow-size-changerv-model="pagination.current":page-size.sync="pagination.pageSize":total="total"@change="onChangePagination"@showSizeChange="onShowSizeChange"/></div>

3.data中的數據

total: 100,pagination: {// 分頁simple: false,current: 1,total: 0,pageSize: 10},

4.某個方法

// 任務文件搜索handleSearchInput(value) {this.searchObj.pageNum = 1;this.pagination.current = 1;if (value.trim()) {this.searchObj.taskNameOrFileName = value.trim();} else {this.searchObj.taskNameOrFileName = null;}this.getMyDownloadList();},

5.分頁

// 點擊分頁onChangePagination(current) {this.searchObj.pageNum = current;this.pagination.current = current;this.getMyDownloadList();},// 點擊分頁尺寸onShowSizeChange(current, pageSize) {this.searchObj.pageSize = pageSize;this.searchObj.pageNum = current;this.pagination.current = current;this.pagination.pageSize = pageSize;this.getMyDownloadList();}

6.樣式 隱藏原來的table自帶的分頁

<style lang="less">/deep/.ant-table-pagination.ant-pagination {display: none;}.paginationBox {position: relative;margin-top: 56px;margin-bottom: 108px;padding: 0 0 0 113px;.pagination {// background-color: cyan;float: right;margin-right: 100px;.ant-pagination-item-active {background: rgba(28, 106, 235, 1);a {color: #fff !important;font-weight: 400 !important;}}// li:first-child{// margin-left: calc(100% - 300px);// }.ant-pagination-options-size-changer.ant-select {width: 100px;// background-color: red;position: absolute;left: 0;top: 0;}.ant-pagination-options-quick-jumper {// background-color: red;position: absolute;right: 0;top: 0;}}} </style>

分割線
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
以下部分是另一個需求代碼—手寫分頁：

1.正常情況下，此頁面只需要將表格table和分頁pagination結合就可以使用其分頁獲取數據的效果；

但是此頁比較特殊，獲取到字段的信息后，將字段的分級修改選擇后，提交給后端需要提交所有的數據list，而不是某一頁的數據list。

在此情境下，原table自帶的10條分頁雖然滿足，但是字段過多時候無法選擇每頁的尺寸；而表格table和分頁pagination結合又無法獲取所有的數據list進行一次性的修改和提交；

所以這里我的做法是，繼續使用表格table和分頁pagination的分頁功能，但是讓后臺直接一次性返回所有的數據list，而我在獲取到所有數據后，第一次手動截取前10條的數據，作為默認的第1頁10條的數據進行展示。

else if (urlLink == "grading/gradColumnDetail") { // 獲取列表信息var data = [];for (var i = 0; i < rep.data.rspData.length; i++) {var obj = rep.data.rspData[i];obj.key = i + 1;data.push(obj);}//所有的字段--用于最后提交、一次性設置分級和記錄每一次的分級設置_self.dataAll = data;//顯示數據列表的data字段 不是所有的字段（手動截取） 同時展示的個數不僅僅取決于自己截取的個數 還取決于選擇的尺寸必須大于等于截取個數 才會顯示完全//截取的數據=（當前頁碼 - 1）*頁碼尺寸 截取到 當前頁碼*頁碼尺寸_self.data = data.slice((_self.pagination.current - 1) * (_self.pagination.pageSize),(_self.pagination.current) * (_self.pagination.pageSize));_self.total = _self.dataAll.length;_self.loading = false;_self.id = rep.data.rspData.record_id;}

后面選擇分頁的頁碼或者尺寸，注意不應該再走獲取數據list的接口了；而應該是自己手動截取總量list進行顯示即可；

//手動針對所有數據進行分頁截取getNeedSum(){//判斷選擇的頁碼和頁碼尺寸有沒有超過總量;if ((this.pagination.current - 1) * (this.pagination.pageSize) <= this.total) {//沒超過----正常選擇截取//截取的數據=（當前頁碼 - 1）*頁碼尺寸 截取到 當前頁碼*頁碼尺寸this.data = this.dataAll.slice((this.pagination.current - 1) * (this.pagination.pageSize),(this.pagination.current) * (this.pagination.pageSize));} else {//如果超出總量 那就是截取最大頁碼的那一頁數據Math.ceil()//例如總量61，一開始是第3頁 頁碼是10條，當頁碼選擇為40條時候，總條數是沒有3頁40條的，而應該是最大頁 2頁40條尺寸//截取的數據=（最大頁碼 - 1）*頁碼尺寸 截取到 最大頁碼*頁碼尺寸this.data = this.dataAll.slice((Math.ceil(this.total/this.pagination.pageSize) - 1) * (this.pagination.pageSize),(Math.ceil(this.total/this.pagination.pageSize)) * (this.pagination.pageSize));}},// 點擊分頁onChangePagination(current) {console.log(current); this.pagination.current = current; this.getNeedSum();},// 點擊分頁尺寸onShowSizeChange(current, pageSize) { this.pagination.current = current;this.pagination.pageSize = pageSize; this.getNeedSum(); },

總結

以上是生活随笔為你收集整理的ant中的table和pagination表格分页结合使用 手写分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。