目前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> 项
{needTotalList.map(item => (
<span style={{ marginLeft: 8 }} key={item.dataIndex}>
{item.sumInfo || (item.title + '总计')}
<span style={{ fontWeight: 600 }}>
{item.render ? item.render(item.total) : item.total}
</span>
{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 //是否需要累加
}]
},
……
]
如果我的改造对你略有帮助,我将十分开心,当然如果有纰漏之处,也欢迎留言讨论