element ui 表格统计行（当单元格有多条数据许统计时）的操作
统计行显示多条统计数据（效果如下图）
根据element ui文档，将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，但是如图，每个单元格有多行数据，数值都需要合计，具体代码如下
getSummaries(param) {
const {
columns, data } = param;
const sums = [];
//循环处理所有列数据
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总计';
return;
}else if(index === 1){
var word1 = <div class="borders">{
'总需求'}</div>
var word2 = <div class="borders">{
'总实际'}</div>
var word3 = <div style="width: 193px;margin-left: -14px;">{
'总GAP'}</div>
sums[index] = [word1,word2,word3];
return;
}
//将每列的所有数据数字化处理成一个数组
const values1 = data.map(item => {
if(column.type == 'cell') {
let obj = item.value
let spendTime1 = 0
spendTime1 = Number(obj[column.property].need)
return spendTime1
} else {
return NaN
}
});
const values2 = data.map(item => {
if(column.type == 'cell') {
let obj = item.value
let spendTime2 = 0
spendTime2 = Number(obj[column.property].get)
return spendTime2
} else {
return NaN
}
});
if (!values1.every(value => isNaN(value))) {
//判断是否为统计列
var num1 = values1.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return (parseFloat(prev) + parseFloat(curr)).toFixed(2)
} else {
return parseFloat(prev).toFixed(2)
}
}, 0);
var num2 = values2.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return (parseFloat(prev) + parseFloat(curr)).toFixed(2)
} else {
return parseFloat(prev).toFixed(2)
}
}, 0);
var html1 = <div class="borders">{
num1}</div> //js里面增加div样式
var html2 = <div class="borders">{
num2}</div>
var html3 = <div style="width: 193px;margin-left: -14px;">{
(num1-num2).toFixed(2)}</div>
sums[index] = [html1,html2,html3]
}
else{
sums[index] = []
}
});
return sums;
},
至于统计行的样式，如上代码，声明一个变量，赋值为div，在div里面填充要展示的变量，就可以啦
