element ui 表格统计行统计多条字段数据以及设置统计行样式

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里面填充要展示的变量，就可以啦