ant-design Table表格添加合计行

小灰灰 2022-11-06 14:50 1491阅读 0赞

### 文章目录 ###

*  1：方式一：（比较好维护：推荐）
 *   *  1：效果图
     *  2：排序数字
     *  3：table
     *  4：data定义
     *  5：请求发送
     *  6：请求返回截图
 *  2：方式二（可以实现功能效果，但是感觉不太优雅，会有列错位的问题，不推荐！！！）
 *   *  1：效果图
     *  2：实现方式
     *  3：实现代码
     *  4：css
     *  5：数据分割
 *  30：参考地址

# 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：效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 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; }
                  
                }
              },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 2]

## 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">

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 3]

## 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
            },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 4]

## 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加一，让页面展示可以展示出来
                }
              }
            })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 5]

## 6：请求返回截图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 6]

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

## 1：效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 7]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 8]

## 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 ##

## 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.  [地址一][Link 1]
2.  [地址二][Link 2]
3.  [地址三][Link 3]
4.  [地址四][Link 3]
5.  [地址五][Link 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/dd8eac4497f249cab6fc6dad949c1157.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221023/7c6653946c84416a9da8017ae9db3d6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221023/a3208a6df7e147af8d5dae3bba595a54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221023/915631bbed31488abc669633423a119e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221023/64c6eb6a91ec47358b88569f2b3acf52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221023/45673bb9c85e42ba83564022211990bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221023/07216b9d3ded4f61b425b3f582f38a7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221023/1401fb24e9bf4e68a335183190f5383b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221023/6d4d8a41f39b4532ac93f0cb7f3b40d1.png
[Link 1]: https://blog.csdn.net/ThisEqualThis/article/details/103369469
[Link 2]: https://www.jianshu.com/p/8a9e4b7b7a00
[Link 3]: https://blog.csdn.net/u013592575/article/details/89023008
[Link 4]: https://blog.csdn.net/wo_dxj/article/details/86605650