elementUI表格合计行放顶部，合计行渲染所有数据的和（不是计算当前分页的和）

效果图如下：
咋们可以借用样式将合计行置顶

// 表格合计行放顶部
.summaryMethodTop.el-table {
  display: flex;
  flex-direction: column;
  .el-table__body-wrapper {
    order: 1;
  }
}

让后端将合计行的数据返回一个obj，字段跟表格数据字段保持一致，然后再合计方法getSummariesMethod中进行渲染 sums[index] = isNaN(this.sumObj[column.property]) ? '' : this.sumObj[column.property]

 <!-- 表格 -->
    <div class="tableContent">
      <el-table class="summaryMethodTop" :data="tableData" stripe border fit height="550px" :header-cell-style="tableHeaderColor"  :summary-method="getSummariesMethod" :show-summary="true">
        <el-table-column v-for="(value,name) in tableThead" :key="value" :label="value" :prop="name" min-width="120">
          <template slot-scope="scope">
            {{ scope.row[name] }}
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="formData.total" :page-num.sync="formData.pageNum" :page-size.sync="formData.pageSize" @initPage="initList" />
    </div>

 data() {
    return {
      // 表格表头
      tableThead: {
        yearAgreementNo: '编号',
        checkCompany: '单位',
        monthWeight: '月度量（吨）',
        agreementTotalWeight: '总量（吨）',
        annualDepositAmount: '年度金额（元）',
        rebateAmount: '返利金额（元）',
        agreementTotalAmount: '付款总额（元）',
        paidAmount: '已付货款（元）',
        returnAmount: '已退货款（元）',
        transferIntoAmount: '转入金额（元）',
        transferOutAmount: '转出金额（元）',
        num: '总数量',
      },
      formData: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      // 表格数据定义（目前是假数据，方便看效果）
      tableData: [
        {
          yearAgreementNo: '编号',
          checkCompany: 单位',
          monthWeight: '10',
          agreementTotalWeight: '6',
          annualDepositAmount: '66',
          rebateAmount: '66',
          agreementTotalAmount: '66',
          paidAmount: '66',
          returnAmount: '66',
          transferIntoAmount: '66',
          transferOutAmount: '66',
          num: '66'
        }
      ],
      //合计行数据定义， 这里后端计算所有数据的和后，返回（目前是假数据，方便看效果）
      sumObj:  {
        yearAgreementNo: '',
          checkCompany: '',
          monthWeight: '10',
          agreementTotalWeight: '6',
          annualDepositAmount: '66',
          rebateAmount: '66',
          agreementTotalAmount: '66',
          paidAmount: '66',
          returnAmount: '66',
          transferIntoAmount: '66',
          transferOutAmount: '66',
          num: '66'
      }
    }
  },

/** 表格合计行渲染所有数据的和，不是当前页的和 */
    getSummariesMethod(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        sums[index] = isNaN(this.sumObj[column.property]) ? '' : this.sumObj[column.property]
      });
      return sums;
    },

// 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #000;color: #fff;font-weight:bold'
      }
    },