VUE+ELEMENTUI表格的合计方法总结

业务需要 统计表格的总计数，原来是后台设计传来总数值，在表格外显示。
但是有导出需求，使用前端页面HTML的导出，导出表格内容。
由于统计总数不在表格内容，导出不了。

查找处理方法，发现ELEMENTUI 有表格尾部合计的功能，就以此来处理数据，来完成导出Excel的需要。
根据查找的资料，结合自己的需求，总结如下。

1、el-table 标签加入

show-summary :summary-method=“getSummaries”

默认统计
<el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      show-summary
……>
自定义方法
<el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      show-summary :summary-method="getSummaries"
……>

2、show-summary 和 :summary-method=“getSummaries” 区别

show-summary是在表尾增加合计；
:summary-method="getSummaries"是自定义合计函数；

show-summary 默认的处理 是把能数字加的都加上

如上图例子，show-summary，字段”统计类型是”是 标识 1 2，那么统计就会合计为3，这不是我们期望的结果。这个时候，就需要定义
:summary-method=“getSummaries” 方法处理了。

3、数字展示处理

由于存储钱是分，页面展示是需要除以100的
处理有2种方式：
方式1：
js写方法

typeFun(row, column, cellValue){
         return cellValue/100
 },

绑定

<el-table-column
      v-bind:formatter="typeFun"
        prop="money"
        header-align="center"
        align="center"
        label="消费总金额">
      </el-table-column>

方式2：

<el-table-column prop="money"
 header-align="center"
 min-width="20"
 align="center"
 label="消费总金额">
        <template slot-scope="scope">
          <p v-text="scope.row.money/100"></p>
        </template>
      </el-table-column>

这两种方式，显示结果，例如120000，显示为1200
但是统计的时候，还是按照prop=“money” 的实际值统计结果显示
例如 120000 +10000 = 130000
这样也不是想要的统计结果

4、自定义方法处理

查找资料，结合总结了一下，方便使用
有两种处理方式

方式一： 统计的数据是后台计算传来的需要了 显示，不需要的字段不显示

	  // 表格合计的，后台处理了钱数数据
      getSummaries(param) {
          const { columns, data } = param;         
          const sums = [];
          columns.forEach((column, index) => {
            if (index === 0) {
              sums[index] = '总计';
              return;
            }
            //this.allmoney是后台返回的总的数据，然后取值到这里
		//判断column.property，可以根据需要特殊处理数据，此处只有金额统计
          switch(column.property) {
              case "money":
              	sums[index] = this.allmoney/100 + ' 元' 
              break;
                            
              default:
              break;
            }
          });

          return sums;
        },

方式二：通过页面计算合计，要根据列内容，分别处理

由于存钱数是分，要根据列内容，分别处理，次数不需要特殊处理，所有结果可以分别加上单位

		//自定义统计
        getSummaries(param) {
            const { columns, data } = param;//这里可以看出，自定义函数会传入每一列，以及数据
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                sums[index] = '总计';
                return;
            }
            //页面分别统计 处理
            const values = data.map(item => 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);
                
                //console.log("sums[index]=="+sums[index])
				//此处结合了方式一的判断处理，实现多种条件处理
                switch(column.property) {
                    case "money":
                    case "money1":
                    case "money2":
                    case "money3":                     
                        return sums[index] = sums[index]/100 + " 元" ;
                        break;
                    case "num":                     
                        return sums[index] = sums[index] + " 次" ;
                        break;                  
                } 
                
            } else {
                sums[index] = ''; //如果列的值有一项不是数字，就显示这个自定义内容
            }
            });
            return sums;//最后返回合计行的数据
        },

有了这样的表格统计，加上前端页面表格打印，就能方便出导出数据了