需求案例:
代码:
页面:
<el-table
id="out-table"
:data="tableData1"
isdrag
highlight-current-row
style="width: 100%"
:border="true"
class="el_table_new"
show-summary
:summary-method="getTotal"
>
<el-table-column prop="name" label="表名" width=""></el-table-column>
<el-table-column prop="success" label="上报成功" width=""></el-table-column>
<el-table-column prop="error" label="上报失败" width=""></el-table-column>
<el-table-column prop="total" label="合计" width=""></el-table-column>
</el-table>
数据结构:
tableData1: [
{
name: "预算项目",
success: 12,
error: 1,
},
{
name: "采购项目",
success: 21,
error: 0,
},
{
name: "包件(标段)",
success: 13,
error: 0,
},
{
name: "采购(资格预审)公告",
success: 21,
error: 0,
},
{
name: "更正事项",
success: 50,
error: 0,
},
{
name: "中标(成交)结果公告",
success: 50,
error: 0,
},
{
name: "采购合同",
success: 50,
error: 0,
},
], //表格数组
方法函数:
// 合计列
getTotal(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
const values = data.map(item => Number(item[column.property]));
if (column.property === 'success' || column.property === 'error') {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index];
} else {
sums[index] = '--';
}
});
return sums;
},
实现效果:
合并行,可以考虑遍历数组 再每个对象中添加 合计得 字段 ,然后把所需求和字段相加 即可。