表格合计行放顶部

合计行渲染所有数据的和（不是计算当前分页的和）

表格合计行放顶部

// 表格合计行放顶部
.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'
      }
    },

表格合计行放底部：

   <el-table
          :data="tableData"
           id="gy-table"
          height="780"
          border
          stripe
          show-summary
         :summary-method="getSummaries" 
          highlight-current-row>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column
              prop="enter_date"
              label="采购日期">
          </el-table-column>
          <el-table-column
              prop="all_count"
              label="总数量">
          </el-table-column>
          <el-table-column
              prop="all_amount"
              label="采购金额（元）">
          </el-table-column>

      </el-table>

  getSummaries(param) {
      const { columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
              if (index === 0) {
                  sums[index] = '总金额';
                  return;
              }
              const values = data.map(item => Number(item[column.property]));
              //if (!values.every(value => isNaN(value))) {
              //指定列名是totalAmount或amount的列，其他不统计
              if (!values.every(value => isNaN(value)) && (column.property === 'totalAmount' || column.property ==='amount')) {
                  sums[index] = values.reduce((prev, curr) => {
                      const value = Number(curr);
                      if (!isNaN(value)) {
                          return prev + curr;
                      } else {
                          return prev;
                      }
                  }, 0);
                  sums[index] += ' 元';
              } else {
                  sums[index] = 'N/A';
              }
          });

       return sums;
   },

修改合计行的字体样式

<el-table
  :data="billDetailsData"
  border
  show-summary
  id="gy-table"
  :summary-method="getSummaries"
  style="width: 100%"
  stripe
>
  <el-table-column prop="name" label="项目" min-width="100"/>
  <el-table-column prop="money1" label="金额1"/>
  <el-table-column prop="money2" label="金额2"/>
  <el-table-column prop="money3" label="金额3"/>
  <el-table-column prop="money4" label="金额4"/>
  <el-table-column prop="money5" label="金额5"/>
  <el-table-column prop="money6" label="金额6"/>
  <el-table-column prop="money7" label="金额7"/>
  <el-table-column prop="money8" label="金额8"/>
</el-table>

引入数字小写转大写方法
import { chineseNumber } from ‘@/utils/utils’

赋值为最后一个值并转大写以及合并

watch: {
  billDetailsData: {
    async handler() {
      await this.$nextTick(()=>{
        const tds = document.querySelectorAll('#gy-table .el-table__footer-wrapper tr>td');
        tds[1].innerText = chineseNumber(tds[8].innerText) //数字转大写
        tds[1].colSpan = 3;
        tds[1].style.fontWeight = 'bold';
        tds[1].style.fontSize = '14';
        tds[1].style.textAlign = 'center'
        tds[2].style.display = 'none'
        tds[3].style.display = 'none'
      });
    }
  },
},

自动计算各项和

getSummaries(param) {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '总价';
      return;
    }
    if (index === 4) {
      sums[index] = '小写';
      return;
    }
    const values = data.map(item => Number(item[column.property]));
    if (!values.every(value => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
      // sums[index] += ' 元';
    } else {
      sums[index] = 'N/A';
    }
  });
  return sums;
},