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
    }
  }
}