如何在AG Grid渲染行前设置过滤器模型，避免数据闪烁？

这个问题我太熟了！gridReady事件确实会晚一步——等触发它的时候，网格已经走完了初始渲染流程的大部分环节，所以才会出现全量数据先闪一下再被过滤的情况。给你几个靠谱的解决办法，按优先级推荐：

1. 直接在gridOptions中预设filterModel #

这是最简单直接的方案，把你的过滤器模型提前放进网格配置里，网格初始化时会自动读取并应用，完全不会出现渲染后再过滤的问题。

修改你的代码如下：

// 组件内的gridOptions配置
gridOptions: GridOptions = {
  // 你的其他网格配置（列定义、分页、样式等）
  filterModel: this.filterModel, // 直接把预设过滤器模型放在这里
  onGridReady: (params) => {
    params.api.sizeColumnsToFit();
    // 这里不需要再调用setFilterModel了！
  }
};

2. 使用initialState配置全局初始状态 #

如果你的过滤器属于网格整体状态的一部分（比如还要同步保存排序、列宽等状态），可以用initialState来统一配置，它会在网格初始化阶段一次性应用所有预设状态：

gridOptions: GridOptions = {
  initialState: {
    filter: this.filterModel, // 将过滤器模型放在initialState的filter字段下
    // 还可以添加其他初始状态，比如sort: {...}, columnWidths: [...]
  },
  onGridReady: (params) => {
    params.api.sizeColumnsToFit();
  }
};

3. 延迟加载rowData（适合异步数据场景） #

如果你的数据是异步获取的，也可以先设置好过滤器，再把数据传给网格，确保过滤逻辑先于数据渲染执行：

onGridReady: (params) => {
  params.api.sizeColumnsToFit();
  // 先设置过滤器模型
  params.api.setFilterModel(this.filterModel);
  // 再加载数据
  params.api.setRowData(this.yourAsyncData);
}

不过这种方式不如前两种优雅，仅推荐在数据和过滤器都需要动态异步获取、必须保证执行顺序的场景下使用。

以上方法都能确保过滤器在数据渲染之前就生效，彻底解决数据短暂闪烁的问题。你可以把示例项目改成第一种方式试试，立马就能看到效果~

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