1、要实现的效果如下:
2、实现代码如下:
<el-table show-summary :summary-method="summarySum"></el-table>
/js方法部分
summarySum({ columns, data }) {
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "合计"; //可更改合计行的名称
return;
}
const values = data.map((item) => {
return Number(item[column.property]); //property为表头的prop值
});
// every() 方法用于检测values数组所有元素是否都符合指定条件(通过函数提供)
if (!values.every((value) => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr); //Number转换为数值
let sum = Number(Number(prev) + Number(curr));
if (!isNaN(value)) {
return sum;
} else {
return prev;
}
}, 0);
if(index === 7){
sums[index] += "%"; //给合计项添加单位%
}
} else {
sums[index] = "";
}
});
return sums; //返回sums数组,sums数组中各项就会显示在合计行的各列中
},