背景
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>
- 合计行位置放到首行
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)},}
- 定义合计逻辑方法
data() {return {costList:[], //接收后端数据}},created() {this.getSummaryMethod();},methods: {/** 自定义合计逻辑 */getSummaryMethod(params) {const { columns, data } = params;const sums = []; //累加和const totalValue = []; //存储列表，封装合计行要显示的数据columns.forEach((column, index) => { //参数（列，列下标）sums [index] =0; //累加和，初始化为0var 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; //返回合计行列表},
}
