ant-design Table表格添加合计行

1：方式一：（比较好维护：推荐）

实现思路：
1：就是对分页的pagesize（页大小）进行操作
2：后台把合计数据返回回来（注：合计的这一行数据不算进总数据里面，例如：查询一页数据是10条数据(也就是pagesize是10)，后台返回十一条数据，但是size就是10。）
3：关键是怎么保证请求为10条，返回为11条，还正常显示呢？
4：敲黑板：这里是重点：首先明确一点是，每页请求的数量为10的倍数，请求的时候判断pagesize % 10 是不是为0,如果为0，pagesize的值不变去请求后台，如果不为0,则 减一。
（3，4总结：请求pagesize不为0减一，返回结果加一）

1：效果图

2：排序数字

  defColumns: [{
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (text, record,index) {
              if(record.name === '合计'){ return '' } else { return parseInt(index)+1; }
              
            }
          },

3：table

 <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

4：data定义

 ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['11', '21', '31'],//保证每页数据为10条，不算合计！！！;
        // pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
        },

5：请求发送

 		if(this.queryParam.pageSize % 10 == 0){//请求为10的倍数不减一，否则减一
          params.pageSize = this.queryParam.pageSize;
        }else{
          params.pageSize = this.queryParam.pageSize - 1;
        }
        console.log("search参数"+JSON.stringify(params))
        getAction(this.url.list, params).then(res => {
          if (res.success) {
            if(res.result.records != undefined && res.result.records.length >=0){
              this.dataSource=res.result.records;
              this.ipagination.total = res.result.total;
              this.ipagination.pageSize = res.result.size + 1;//结果pagesize加一，让页面展示可以展示出来
            }
          }
        })

6：请求返回截图

2：方式二（可以实现功能效果，但是感觉不太优雅，会有列错位的问题，不推荐！！！）

1：效果图

2：实现方式

在footer中渲染一个与原表一模一样的表结构，隐藏表头，我这里使用的时z-index层级结构，定位的方式，把footer表上移，把表头隐藏进上表的最后一行。原因：因为每行我都没给宽度，每行的宽度都是根据数据的长度自适应的。这也是showHeader={true}使用true的原因。

3：实现代码

// 1.在表添加footer属性
<a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        :footer="handleFooterShow"
        >
// 2.vue methods:添加以下方法（渲染表尾）

 handleFooterShow(data) {
      return (
         <a-table
          ref="table"
          size="middle"
          bordered
          rowKey={Math.random}
          bordered={false}
          pagination={false}
          columns={this.columns}
          dataSource={this.footerDataSource}
          showHeader={true}
           class="j-table-force-nowrap"
        ></a-table>
      );
    },

// ***注意：渲染的footer中的表头columnv需要与表格中的表头columns结构完全一致，并且表头每个字段渲染处都需要给个宽度

4：css

<style lang="less" scoped>
    /deep/ .ant-table-content .ant-table-body{
    position: relative;
    z-index: 2;
    background: #FFFFFF;
    }
    /deep/ .ant-table-footer .ant-table-body{
      overflow: hidden !important;
      position: relative !important;
      z-index: 1 !important;
    }
    /deep/ .ant-table-content > .ant-table-footer {
    padding: 0 !important;
    top: -47px;
    position: relative;
    z-index: 0;
    }
</style>

5：数据分割

  //假设每行正常显示10条数据，因为records是十一条数据，所以dataSource显示十条数据，又因为有一条是合计数据，所以footerDataSouce则展示的就是最后一条合计数据。
  // this.dataSource = res.result.records.slice(0,res.result.records.length - 1);
  // this.footerDataSource = res.result.records.slice(res.result.records.length - 1);

30：参考地址

1. 地址一
2. 地址二
3. 地址三
4. 地址四
5. 地址五