ag-grid列不在视图或隐藏时valueGetter不触发的解决方案咨询

核心原因 #

ag-grid默认开启列虚拟化做性能优化，仅会实例化、更新当前视口内的可见列，非视口列、隐藏列的valueGetter默认不会主动触发重算，仅在列进入可视区域时才会执行计算逻辑。

可选解决方案 #

方案1：禁用列虚拟化（快速适配，仅解决非视口列问题） #

在gridOptions中添加配置关闭列虚拟渲染，所有非隐藏列不管是否在滚动视口内都会被实例化，编辑后自动触发全量valueGetter重算：

gridOptions = {
  // 其他原有配置
  suppressColumnVirtualisation: true
}

注意：该方案无法解决隐藏列的计算触发问题，50列规模下性能无明显影响，列数超过200时不推荐使用。

方案2：手动强制全量刷新（推荐，覆盖所有场景） #

保留列虚拟化的性能优势，同时覆盖隐藏列、非视口列的计算需求，在单元格编辑完成的cellValueChanged事件回调中调用refreshCells强制刷新所有列：

import { CellValueChangedEvent } from 'ag-grid-community';

// 绑定到ag-grid的cellValueChanged事件
onCellValueChanged(params: CellValueChangedEvent) {
  params.api.refreshCells({
    force: true, // 跳过默认更新校验，强制触发重算
    columns: params.columnApi.getAllColumns() // 传入所有列，包含隐藏列
  });
}

该方案执行后，所有列的valueGetter会立即全量执行，切换视图组显示隐藏列时直接读取已计算完成的结果，不会出现延迟计算的问题。

方案3：预计算存储到行数据（性能最优，适合复杂计算场景） #

如果计算逻辑复杂度较高、全量重算耗时较长，可以放弃valueGetter的动态计算逻辑，将计算结果直接存储到rowData的对应字段中：

• 封装独立的计算函数，输入行数据返回所有列的计算结果
• 编辑单元格时触发该计算函数，更新当前行的所有计算字段
• 调用params.api.applyTransaction({ update: [params.data] })更新行数据
  该方式无论列是否可见，值都已经预先计算完成，无额外的动态计算开销。

版本兼容性说明 #

以上所有方案均兼容ag-grid 23.0.2与Angular 8版本，无需升级依赖。

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