背景

el-table原生合计行是在标签内增加show-summary属性，在表尾实现设计合计，且只对表格当前页面显示的列数据进行合计。element-UI效果如下图所示。

现要求在首行显示合计行，并自定义合计逻辑实现如下效果。

图示表格中，成本、收入、利润可以由列累加得；而利润率不能简单的直接累加，否则会出现利润率越来越高的情况，不符合生活常识和实际情况，因此该列的合计逻辑依然是【利润率 = 利润/收入】

前端

show-summary显示合计，:summary-method声明使用自定义合计方法。

<el-table v-loading="loading" :data="costList" border
                          :header-cell-style="{backgroundColor: '#DFEBF8'}"
                          show-summary
                          :summary-method = "getSummaryMethod"">
                          <el-table-column……/>
                          <el-table-column……/>
                          <el-table-column……/>
                          <el-table-column……/>
                          <el-table-column……/>

</el-table>                          

1. 合计行位置放到首行

methods:{    
    /** 合计行设置 */
    showSummariesPosition () {
      // 合计行显示在表头
      let table = document.querySelector('.el-table')
      let footer = document.querySelector('.el-table__footer-wrapper')
      let body = document.querySelector('.el-table__body-wrapper')
      table.removeChild(footer)
      table.insertBefore(footer, body)
    },
 }

2. 定义合计逻辑方法

  data() {
return {
costList:[],	//接收后端数据
}
},
created() {
this.getSummaryMethod();
},
methods: {
/** 自定义合计逻辑 */
getSummaryMethod(params) {
const { columns, data } = params;
const sums = [];  //累加和
const totalValue = [];  //存储列表，封装合计行要显示的数据
columns.forEach((column, index) => {		//参数（列，列下标）
sums [index] =0;	//累加和，初始化为0
var i;
if (index === 0) {	//第一列显示“合计”字样
totalValue[index] = "合计";
return;
}
if (index === 1) {  //第二列----总成本
for (i = 0; i < this.costList.length; i++){	//循环累加
sums[index] = this.costList[i].totalCost+sums[index];	
};
totalValue[index] = (sums[index]/10000).toFixed(2) + '万元';//格式化，保留两位小数
//把累加和写入合计行列表
return ;
}
if (index === 2) {   //第三列----总产值
for (i = 0; i < this.costList.length; i++) {
sums[index] = this.costList[i].totalOutput+sums[index];
}
totalValue[index] = (sums[index]/10000).toFixed(2) + '万元';
return ;
}
if (index === 3) {    //第四列----利润
sums[3] = sums[2]-sums[1];
totalValue[index] = (sums[3]/10000).toFixed(2) + '万元';
return ;
}
if (index === 4) {    //第五列----利润率 = 利润/收入
totalValue[index] = (sums[3]/sums[2]*100).toFixed(2) + '%';
return ;
}
});
return totalValue;	//返回合计行列表
},
}