AG-Grid单元格与行选择不同步：行高亮延迟问题求助

可能原因及对应解决办法 #

• 行高亮样式带过渡动画
  如果自定义了行选中的CSS样式，比如添加了transition属性，会导致样式变化出现延迟。直接移除行高亮相关的过渡样式，或者设置transition: none强制样式即时生效。

• 行节点样式更新未被即时触发
  高频数据更新时，AG-Grid可能会批量处理行节点的状态更新。可以在onCellClick事件里，手动获取当前点击的rowNode，调用rowNode.refreshStyle()方法强制触发行样式的即时更新。示例代码：

  onCellClick(params) {
    // 原有业务逻辑
    params.rowNode.refreshStyle();
  }
  

• Transaction API的批量更新策略影响
  Transaction API默认会合并更新操作以提升性能，可能导致行选中状态的更新被滞后。可以尝试在提交事务时，调整配置强制同步更新：

  gridApi.applyTransaction({
    update: updatedRows,
    sync: true // 强制同步更新，减少延迟
  });
  

• 列虚拟化引发的行DOM复用冲突
  虽然启用了列虚拟化，但行DOM的复用逻辑可能导致样式更新不及时。可以临时关闭行虚拟化（50行数据量不大，性能影响可忽略），测试是否解决问题，以此排除DOM复用的影响。

• 行选中状态与数据更新的时序问题
  高频数据更新可能覆盖了行选中状态的同步时机。可以在onTransactionCompleted事件里，手动同步当前选中行的状态，确保样式及时更新。

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