ant中的table和pagination表格分页结合使用手写分页

表格部分
在这里插入图片描述

		<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(); },