Vue2+ag-grid：如何在合计列首行显示该列行总和？

问题场景 #

在Vue2项目的AG-Grid中，某列通过valueGetter计算每行的行内总和，同时在网格顶部额外添加了总计行（rowIndex=0）和百分比行（rowIndex=1）。需要在总计行中显示所有数据行的行内总和之和，但由于这两行不属于原始rowData，直接访问索引无效。

解决方案 #

核心思路是通过AG-Grid的API获取所有数据节点，遍历计算每个数据行的行内总和后累加，得到总计值。

步骤1：获取AG-Grid实例API

首先在组件中通过grid-ready事件获取Grid API，用于后续遍历数据节点：

<ag-grid-vue
  :columnDefs="columnDefs"
  :rowData="rowData"
  @grid-ready="onGridReady"
  <!-- 其他配置项 -->
></ag-grid-vue>

export default {
  data() {
    return {
      gridApi: null,
      // 其他数据配置
    };
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api;
    },
    getEditableColumns() {
      // 返回你的可编辑列字段名数组，比如 ['col1', 'col2', 'col3']
      return ['col1', 'col2'];
    }
  }
};

步骤2：修改valueGetter计算总计

更新列的valueGetter逻辑，在总计行中遍历所有数据节点计算总和：

valueGetter(params) {
  const editableColumns = this.getEditableColumns();

  // 处理顶部总计行（rowIndex=0）
  if (params.node.rowIndex === 0) {
    let grandTotal = 0;
    // 遍历所有经过过滤/排序的数据节点
    this.gridApi.forEachNodeAfterFilterAndSort(node => {
      // 排除顶部自定义的两行，只计算实际数据行
      if (node.rowIndex > 1) {
        let rowTotal = 0;
        editableColumns.forEach(col => {
          // 空值处理，避免NaN
          rowTotal += node.data[col] || 0;
        });
        grandTotal += rowTotal;
      }
    });
    return grandTotal;
  }

  // 处理百分比行（rowIndex=1）
  if (params.node.rowIndex === 1) {
    return '100%';
  }

  // 处理普通数据行的行内总和
  if (params.node.rowIndex > 1) {
    let total = 0;
    editableColumns.forEach(col => {
      total += params.data[col] || 0;
    });
    return total;
  }
}

关键说明 #

• 使用forEachNodeAfterFilterAndSort确保计算的是当前网格中显示的有效数据（经过过滤、排序后的结果）。
• 通过node.rowIndex > 1排除顶部的自定义行，只统计实际业务数据行。
• 添加|| 0处理空单元格，防止出现NaN导致总计错误。
• 当网格数据更新（如编辑单元格、筛选排序）时，valueGetter会自动重新计算，总计行数据会同步更新。

内容的提问来源于stack exchange，提问作者Alexey