element表格有一个合计属性可以直接计算列的值并在结尾显示
在table里设置show-summary，并自定义一个计算方法getSum给summary-method
下面方法只需要修改calcProp数组内的值，吧需要计算的列的prop放到calcProp数组中
<el-table :data="tableData" show-summary :summary-method="getSum"></el-table>
methods:{
// 表格合计
getSum(param) {
const { columns, data } = param;
const sums = [];
console.log(columns, data);
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "合计";
return;
}
//calcProp 为需要计算的列的prop值的集合
const calcProp = ["energyConsumption", "maxPower", "averagePower"];
if (calcProp.includes(column.property)) {
const values = data.map(item => Number(item[column.property]));
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
}
});
return sums;
},
}
