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

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

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'}   } },

结果展示：