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

问题描述：

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

 最终展示为：

---

解决方案：

关键代码：

show-summary

:summary-method="getSummaries"

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

 

// 合计行 方法
      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; // 根据自己的项目进行微调
    }

  }

最终效果为：