官网中的示例是所有数字列都进行计算总和的。所以需要自己处理。
前端能处理的就尽量不走接口 , 尽可能缓解服务器压力
效果图
HTML
<el-table
:data = "tableData"
border
show-summary
:summary-method="getSummaries"
>
</el-table>
JS
// 合计
getSummaries(param){
const { columns, data } = param;
const len = columns.length;
const sums = [];
columns.forEach((column, index) => {
// 第一列显示合计
if (index === 0) {
sums[index] = '实发项合计';
return;
}else if(index === len - 1){ // 返回数据长度的最后一个
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
} else {
sums[index] = 'N/A';
}
}
});
return sums;
},