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

小灰灰 2021-07-24 14:06 2975阅读 0赞

表格部分  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70]

<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自带的分页

分割线  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
以下部分是另一个需求代码—手写分页：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 1]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70]: /images/20210724/6c16f81984e84e1bb05408669cc021f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 1]: /images/20210724/7290bf3ccf764f6d86301c3800e0994e.png