根据自己的合计逻辑,使用element官方的合计属性summary-method并传入一个方法,返回一个数组,这个数组中的各项就会显示在合计行的各列中,具体看以下代码
//汇总
getSummaries({ 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)).toFixed(2);//toFixed(2)数据项保留两位小数
if (!isNaN(value)) {
return sum;
} else {
return prev;
}
}, 0);
sums[index] += 'MW';//给合计项添加单位MW
} else {
sums[index] = '';
}
});
return sums;//返回sums数组,sums数组中各项就会显示在合计行的各列中
},
官方默认合计行在表格尾部展示,以下为更改合计行的位置,放表格的首行位置,通过css实现
// /deep/ 为深度操作符,可以穿透到子组件
/deep/ .el-table {
display: flex;
flex-direction: column;
}
// order默认值为0,只需将表体order置为1即可移到最后,这样合计行就上移到表体上方
/deep/ .el-table__body-wrapper {
order: 1;
}