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;},

参考链接

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