当前位置：首页 > news >正文

elmentUI el-table 总结行

news 2025/8/6 7:45:35

背景

原因：表格展示的都是明细数据，需要对当前的明细数据的部分字段进行汇总
难点：汇总的条件不一定，有时候客户查的是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;},