el-table 选择列合计，fixed固定某列，合计行放在表格上方，设计合计行样式

问题描述：

        选择特定的几列进行合计，并将el-table的合计行放在表格上方，并修改合计行样式。

 最终展示为：

---

解决方案：

关键代码：

show-summary

:summary-method="getSummaries"

不写summary-method方法，默认计算所有数字列

      <el-row>
        <el-col :span="12">
          <el-row class="selectTableBox">
            <el-table
              ref="tableBox"
              v-loading="loading"
              class="tableBox"
              max-height="38vh"
              :data="tableList"
              show-summary
              :summary-method="getSummaries"
              style="width: 100%"
              :cell-style="{'text-align': 'center'}"
              :header-cell-style="{'text-align': 'center'}"
            >
            <!-- 固定序号列 -->
              <el-table-column label="序号" fixed type="index" width="80" align="center" />
              <el-table-column label="编号" prop="revenueShareNo" min-width="80" show-overflow-tooltip />
              <el-table-column label="名称" prop="productName" min-width="100" show-overflow-tooltip />
              <el-table-column label="金额" prop="amount" min-width="100" show-overflow-tooltip />
              <el-table-column label="特价" prop="bargainPrice" min-width="100" show-overflow-tooltip />
              <el-table-column label="涨幅" prop="increase" min-width="100" show-overflow-tooltip />
              <el-table-column label="月份" prop="businessMonth" min-width="100" show-overflow-tooltip />
              <el-table-column label="备注" prop="remark" min-width="100" show-overflow-tooltip />
              <el-table-column label="更新人" prop="updatedBy" min-width="200" show-overflow-tooltip />
            </el-table>
          </el-row>
        </el-col>
      </el-row>

 

// 合计行 方法
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          // 这里添加需要进行合计的列的名称
          const sumColArr = ['金额', '特价']
          if (sumColArr.includes(column.label)) {
            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)
                .toFixed(2) // 固定两位小数
              sums[index] += '' // 这里可以添加单位 如： sums[index] += '元'
            } else {
              sums[index] = ' '
            }
          }
        })
        return sums
      },

 写完合计行的方法，此时表格样式为：

 接下来对表格样式进行修改：

  .selectTableBox{
    margin: 20px;
    // 合计行样式
    /deep/ .has-gutter tr td .cell:empty::before{
      content:'';
    }
    /deep/ .el-table__footer-wrapper tbody td,
    .el-table__header-wrapper tbody td {
      background-color: #e3f3ff !important;
    }
    /deep/ .el-table__footer-wrapper .is-leaf {
      background-color: #e3f3ff !important;
    }
    /deep/ .el-table__fixed-footer-wrapper tbody td {
      border-top: 1px solid #ebeef5;
      background-color: #e3f3ff;
      font-weight: bold;
      color: #f50b0b;
      text-align: center !important;
    }
    /deep/ .has-gutter tr td .cell {
      text-align: center;
      font-weight: bold;
      color: #f50b0b;
    }

    /deep/ .el-table {
      display: flex;
      flex-direction: column;
    }

    /* order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方 */
    /deep/ .el-table__body-wrapper {
      order: 1;
    }

    // 若没有固定列，以下代码可以不写
    // 将固定列放在首行
    /deep/ .el-table__fixed-body-wrapper {
      top: 96px !important; // 根据自己的项目进行微调
    }

    /deep/ .el-table__fixed-footer-wrapper {
      z-index: 0;
      top: 48px; // 根据自己的项目进行微调
    }

  }

最终效果为：