antd table 多级表头添加合计行，并固定在最后一行

/**
 * @param {table列} columnsData
 * @param {table的数据} data
 * @param {返回总计行，可以追加【push】到数据源} callback
 * @param {是否将第一列变成总计} ISOneTotal
 * @param {指定列求和，为空时求和全部列} sumColumns
 */
export function totalColumns (columnsData, data, ISOneTotal = true, sumColumns = [], callback) {
  var totalColumns = {}
  columnsData.some((item, index) => {
    if (item.children !== undefined) { // 判断是否存在多级表头
      this.totalColumns(item.children, data, false, sumColumns, (childrenTotal) => {
        totalColumns = Object.assign(totalColumns, childrenTotal)
      })
    } else {
      // 如需要指定列求和
      if (sumColumns.length === 0 || sumColumns.indexOf(item.dataIndex) > -1) {
        var s = data.reduce((sum, current, index) => {
          if (typeof (current[item.dataIndex]) === 'number') {
            return sum + current[item.dataIndex]
          } else {
            return sum + 0
          }
        }, 0)
        if (index === 0 && ISOneTotal) {
          totalColumns = Object.assign(totalColumns, { [item.dataIndex]: '总计' })
        } else {
          var totalMoney = parseFloat(s).toFixed(2)
          totalColumns = Object.assign(totalColumns, { [item.dataIndex]: totalMoney === '0' ? '-' : totalMoney * 1 })
        }
      }
    }
  })
  callback(totalColumns)
}

显示最后一行

res.data.rows.push(data) // 追加在数据源后面

固定在列表最后显示

利用ant table的 rowClassName属性

在封装的table 或者页面中 定义样式，注意，要放到全局样式

.fiexdTr {
  position: sticky;
  z-index: 100000;
  bottom: 0;
  background: #6e6e6e;
  font-weight: bold;
  font-size: 15px;
  color: #dbbb1c;
}
.singularRow {
  background: #ffffff;
}
.quantityRow {
  background: #fafafa;
}

table控件引用rowClassName

/**
 * 固定总计行
 * @param {*} record
 * @param {*} index
 */
export function fixedTotal (record, index) {
// 检索每行数据，包含字段'总计'，返回固定行样式
  if (Object.values(record).indexOf('总计') > -1) { 
    console.log(index)
    const name = 'fiexdTr'
    return name
  } else {
    if (index % 2 === 0) { // 隔行变色
      return 'singularRow'
    } else {
      return 'quantityRow'
    }
  }
}