elmentUI el-table 总结行

背景

• 原因：表格展示的都是明细数据，需要对当前的明细数据的部分字段进行汇总
• 难点：汇总的条件不一定，有时候客户查的是1天，有时候是10天

官方写法

只开启开关

• 开启汇总开关
• 如果没有汇总方法，
  • 会自动汇总所有的 数字字段
  • 汇总都是当前页的数据，而不是当前查询的所有结果

<el-table show-summary></el-table>

官方实例

传入自定义汇总方法getSummaries

<el-table show-summary :summary-method="getSummaries"></el-table>

• 自定义汇总方法
• 官方的写法是典型的reduce写法

getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
// column 是每一列，index 表示列的索引，第一列的时候不计算合计，显示自定义的文字内容
if (index === 0) {
sums[index] = '合计';
return;
}
//下面这一坨代码就是把每一列中的所有单元格中的值转化成Number型，
//然后对转化后的结果进行判断，如果是number型，则进行累加，
//如果NaN型，说明单元格里是一些无法转化成number型的值，则返回自定义的内容
// console.log(this.noticeList);
const values = data.map(item => Number(item[column.property]));
// console.log(column);
// 判断需要统计数据的列
if (column.property === 'arrivalQty'||column.property === 'qty'||column.property === 'costPrice'||column.property === 'arrivalCostPrice'||column.property === 'transitQty'||column.property === 'amount'||column.property === 'arrivalAmount'||column.property === 'transitAmount') {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
if(column.property === 'transitQty'||column.property === 'arrivalQty'){
// 处理数据的格式为千分位逗号隔开
sums[index]=sums[index].toLocaleString('zh-CN').replace(/\./g, '');
// console.log(sums[index]);
}
else{
// 处理数据的格式为千分位逗号隔开，数据保留两位小数
sums[index]=sums[index].toLocaleString('zh-CN', {style: 'currency',currency: 'CNY',}).slice(1)
}
} else {
sums[index] = '/';
}
});
// console.log(sums);
return sums;
},

自定义汇总方法

• 不使用官方写的reduce方法，使用自定义的方法进行汇总

 // 获取汇总数据
getSummaries (param) {
const { columns, data } = param;
const sums = [];
console.log(param)
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
// 产出重量的汇总
if (column.property == 'weightOut') {
const values = data.map((item) => Number(item[column.property]));
if (!values.every((value) => isNaN(value))) {
sums[index] = 99.8
}
}
// 投入重量之和的汇总
if (column.property == 'weightInTotal') {
const values = data.map((item) => Number(item[column.property]));
if (!values.every((value) => isNaN(value))) {
sums[index] = 100.2
}
}
// 损耗重量之和
if (column.property == 'wastageWeight') {
const values = data.map((item) => Number(item[column.property]));
if (!values.every((value) => isNaN(value))) {
sums[index] = 0.4
}
}
// 损耗比率平均
if (column.property == 'wastageRate') {
const values = data.map((item) => Number(item[column.property]));
if (!values.every((value) => isNaN(value))) {
sums[index] = 33.3 + '%'
}
}
});
return sums;
},

参考链接

http://blog.csdn.net/m0_62095536/article/details/132897851