el-table使用使用提供的合计行时对合计行进行合并单元格

当使用el-table时免不了要对数据进行合计，el-table提供合计行，使用show-summary即可将合计行显示在表格尾部，

具体参照官方文档： https://element.eleme.cn/#/zh-CN/component/table

但是官方提供的合计行并没有提供对样式进行修改的方式，对此查找资料用一种方式可修改合计行的自定义合并

1.首先显示合计行

<el-table :data="addToData" style="width: 100%" border show-summary
          :header-cell-style="changeColor" :cell-style="changeColor">

...

2.通过f12定位当前table的合计行的具体位置

然后通过原生dom获取到合计行的所有列的集合

const tds = document.querySelectorAll('#table .el-table__footer-wrapper tr>td');

3.合并列，其他列隐藏，显示列不用修改 

tds[0].colSpan=2;
tds[0].style.textAlign='center'
tds[1].style.display='none'
tds[2].colSpan=5;
tds[3].style.display='none'
tds[4].style.display='none'
tds[5].style.display='none'
tds[6].style.display='none'

4.监听属性，表格监听  完整写法

watch:{
  表格数据:{
    immediate:true,
    async handler(){
      //await this.$nextTick(); 根据实际选择延迟调用
      const tds = document.querySelectorAll('#table .el-table__footer-wrapper tr>td');
      tds[0].colSpan=2;
      tds[0].style.textAlign='center'
      tds[1].style.display='none'
      tds[2].colSpan=5;
      tds[3].style.display='none'
      tds[4].style.display='none'
      tds[5].style.display='none'
      tds[6].style.display='none'
    }
  }