el-table 底部合计栏的合并计算

el-mentpus有 关于列的合计，缺少行合计的问题，再此总结分享。

模板部分

<template>
show-Summary    //展示底部合计栏
:span-method="spanMethod"    //控制哪一个特定的列不进行计算

方法部分

<script setup>
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '总价';
      return;
    }
    if (index === 1) {
      sums[index] = '';
      return;
    }         //可以控制特定的列不展示或展示特定的内容
    if (column.property !== 'inoutProjectName') {
      const values = data.map((item, index) => {
        if (index <= data.length-2 && data[index+1].orderInoutProjectId === data[index].orderInoutProjectId && data[index+1][column.property] === data[index][column.property]) {                        
        } else {    // 合并的行正确计算
          return Number(item[column.property])
        }
      });
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        // sums[index] += ' 元';
        // sums[index] += ' ';     //单位名称

      } else {
        sums[index] = '';
      }
    }
  });
  console.log("总和",sums)
  return sums;
}

效果展示

合计的颜色改变

在样式中加入这段代码

<style scoped>
/*合计字体颜色*/
/deep/ .el-table__footer-wrapper tbody td {
  color: #409EFF;
  cursor: pointer;
}
/deep/ .el-table__footer-wrapper tbody td:first-child{
  color: black;
  cursor: auto;
}
</style>