ant design 支持对多表头的求和，并在alert中显示

目前table的现状

目前ant design中使用的StandardTable，其实已经是基于Table 做了一个封装，并且涉及到对Table 中的选中的某列数据项进行累加求和。

实际需求

但是，在实际项目中，我们可能遇到这样的需求，我们不仅需要对某一列累加求和，我们可能还需要对多表头的某几项进行累加求和。

原始组件对于该业务的局限性

• 只支持单表头的求和，不支持分组表头的求和
• 求和只能对某一列的选中项进行求和，不支持跨列
• Alert中的提示信息，就是表头文案+总计，不支持自定义
• 只是对于列表数值相加，不支持单位

二次改造

鉴于上述的一些局限性，为了满足业务需求的实现，本着具体问题具体分享，在此对StandardTable进行一点点修改，以便满足业务需求。

具体详解
- 对需要求和的表头，我们还是需要添加needTotal
- 拆分表头，需要children
- 对于拆分项需要累加的，我们添加属性needSum
- 自定义提示信息，我们添加sumInfo
- 需要单位，我们添加unit

# StandardTable/index.js
handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    let needTotalList = [...this.state.needTotalList];
    needTotalList = needTotalList.map(item => {
      return {
        ...item,
        total: selectedRows.reduce((sum, val) => {
          // return sum + parseFloat(val[item.dataIndex], 10);
          /**
           * 支持拆分表头合并求和
           * 在主表头，需要含有needTotal=true
           * 在child中需要标示那些字段需要累加 needSum= true
           * */ 
          if(item.children){
            const arr = item.children.map(child=>{
              if(child.needSum){
                return parseFloat(val[child.dataIndex], 10);
              }else{
                return 0
              }
            })
            return sum + arr.reduce((childSum,child)=>{
              return childSum + child
            },0);
          }else{
            return sum + parseFloat(val[item.dataIndex], 10);
          }
        }, 0),
      };
    });

    const ShowAlert = ()=>{
      return showAlert?(<div className={styles.tableAlert}>
          <Alert
            message={
              <Fragment>
                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                {needTotalList.map(item => (
                  <span style={{ marginLeft: 8 }} key={item.dataIndex}>
                    {item.sumInfo || (item.title + '总计')}&nbsp;
                    <span style={{ fontWeight: 600 }}>
                      {item.render ? item.render(item.total) : item.total}
                    </span>&nbsp;
                    {item.unit}
                  </span>
                ))}
                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
                  清空
                </a>
              </Fragment>
            }
            type="info"
            showIcon
          />
        </div>):(null)

# 具体的业务脚本.js
 const columns = [
      ……
      {
        title: '第一列',
        needTotal:true, //该列需要累加
        sumInfo:"第一列b+c总和 ",//提示信息头，如果没有，则默认title
        unit:"元",//单位,没有为空
        key:"b+c",
        children: [{
          title: 'a',
          dataIndex: 'num1',
          align:'center'
        },{
          title: 'b',
          dataIndex: 'num2',
          align:'center',
          needSum:true //是否需要累加
        },{
          title: 'c',
          dataIndex: 'num3',
          align:'center',
          needSum:true //是否需要累加
        }]
      },
      ……
    ]

如果我的改造对你略有帮助，我将十分开心，当然如果有纰漏之处，也欢迎留言讨论