elementUI表格合计行的最后一列添加操作按钮

需求：

html代码：

 <el-table show-summary v-loading="tableLoading" :data="tableData" :row-class-name="tableRowClassName" class="tableBox" ref="multipleTable" :header-cell-style="Header" style="color:#33333F">
      <!-- <el-table-column type="index" label="序号" width="100">
      </el-table-column> -->
      <el-table-column fixed label="序号" width="100" align="center">
          <template scope="scope"> 
            <span>{{scope.$index +1}} </span> 
          </template>
      </el-table-column>
      <el-table-column label="商品来源" prop="commodityFrom">
      </el-table-column>
      <el-table-column label="商品类型" prop="commodityFrom">
      </el-table-column>
      <el-table-column label="交易糖豆数" prop="bean">
      </el-table-column>
      <el-table-column label="手续费(糖豆)" prop="charge">
      </el-table-column>
      <el-table-column label="交易活力值" prop="energy">
      </el-table-column>
      <el-table-column label="操作" width="90">
          <template v-if="scope.row" slot-scope="scope">
            <el-button type='text' @click="showDetail(scope.row)">详情</el-button>
          </template>
      </el-table-column> 
  </el-table>

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

在js中：

  tableData: function() {
            let _this = this;
            this.$nextTick(() => {
                let html = _this.$refs.multipleTable.$refs.footerWrapper
                    .querySelector(".el-table__footer")
                    // 在第几列插入按钮
                    .querySelectorAll("td")[6]
                    .querySelector(".cell");
                html.innerHTML =
                    "<el-button type='text' size='small' style='z-index:99999;cursor: pointer;color: #409EFF;' >详情</el-button>";
                html.onclick = () => {
                    _this.gotoDetail();
                };
            });
        },
    },