elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格，给表头换颜色。

1.将show-summary设置为true就会在表格尾部展示合计行。

 <el-table
        :data="tableData"
        id="tableData"
        show-summary
        :summary-method="getSummaries"
        :header-cell-style="tableHeaderColor"
      >

2.借用样式将合计行置顶

::v-deep .el-table {
    display: flex;
    flex-direction: column;
}

/* order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方 */
::v-deep .el-table__body-wrapper {
    order: 1;
}
::v-deep .el-table__fixed-body-wrapper {
    top: 96px !important;
}
::v-deep .el-table__fixed-footer-wrapper {
    z-index: 0;
}

3.使用vue.$el.querySelector()方法,table渲染时，调用封装好的合并方法。

setColSpan() {
     let that = this;
     setTimeout(function () {
         console.log(that.$el.querySelector("#tableData"))
         if (that.$el.querySelector("#tableData")) {
             let current = that.$el
                 .querySelector("#tableData")
                 .querySelector(".el-table__footer-wrapper")
                 .querySelector(".el-table__footer");
             let cell = current.rows[0].cells;
             cell[0].style.display = "none";   //隐藏一列用于多列合并
             cell[1].style.display = "none";   //隐藏一列用于多列合并
             cell[2].style.display = "none";   //隐藏一列用于多列合并
             cell[3].colSpan = "4";  //合并两列
         }
     }, 10);
 },

4.渲染合计，sumObj是通过后端接口得到的对应字段的合计（对象数据）。在并在此处调用合并“合计”文字的单元格

getSummaries(param) {
   const { columns, data } = param
   const sums = []
   columns.forEach((column, index) => {
       if (index === 3) {
           sums[index] = '汇总'
           return
       }
       if (index === 1) {
           sums[index] = ''
           return
       }
       if(column.property != 'cityDesc' && column.property != 'shopName' && column.property != 'shopType' ) {
           if(this.totalByStatistics[column.property+'Total']){
               sums[index] = this.totalByStatistics[column.property+'Total']
           }else{
               sums[index] = 0
           }
       }else {
           sums[index] = null
       }
       
   })
   this.setColSpan();
   return sums
},

5.表头换色

// 修改表头颜色
tableHeaderColor ({ rowIndex, columnIndex }) {
   if (rowIndex === 0 && columnIndex === 0) {
       return { background: '#F5F7FA' }
   } 
   else if (rowIndex === 0 && columnIndex == 1 || rowIndex === 1 && (columnIndex == 4 ||columnIndex == 5 || columnIndex == 6 )) {
       return { background: '#facd91'}
   } 
   else if (rowIndex === 0 && columnIndex == 2 || rowIndex === 1 && (columnIndex == 7 || columnIndex == 8 || columnIndex == 9 )) {
       return { background: '#81d3f8' }
   }
   else if (rowIndex === 2 && (columnIndex == 0 ||columnIndex == 1 || columnIndex == 2 || columnIndex == 3 || columnIndex == 4 || columnIndex == 5)) {
       return { background: '#fce5c5'}
   } 
   else if (rowIndex === 2 && (columnIndex == 6 ||columnIndex == 7 || columnIndex == 8 || columnIndex == 9 || columnIndex == 10 || columnIndex == 11)) {
       return { background: '#c0e9fb'}
   } 
},

结果展示：