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">
      <span
        style="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-pagination
        show-less-items
        class="pagination"
        show-quick-jumper
        show-size-changer
        v-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(); 
    },