You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular中AG Grid动态隐藏/显示列时自动调整行高问题

AG Grid 21.2.1 动态列隐藏/显示时自动调整行高方案

在AG Grid 21.2.1版本中,autoHeight属性不会在列隐藏/显示后自动重新计算行高,需要手动调用API触发行高刷新,具体实现步骤如下:

解决方案代码修改

修改你的showColumn和hideColumn方法,在列状态变更后调用行高重置与刷新的API:

showColumn() {
  this.gridColumnApi.setColumnsVisible(['make'], true);
  // 重置行高并触发重新计算
  this.gridApi.resetRowHeights();
  this.gridApi.onRowHeightChanged();
}

hideColumn() {
  this.gridColumnApi.setColumnsVisible(['make'], false);
  // 重置行高并触发重新计算
  this.gridApi.resetRowHeights();
  this.gridApi.onRowHeightChanged();
}

补充说明

  • resetRowHeights():清除所有已设置的自定义行高,将行高恢复为默认状态。
  • onRowHeightChanged():通知网格重新计算每一行的高度,适配当前显示列的内容换行后的实际高度。
  • 若出现行高计算延迟或不准确的情况,可通过setTimeout延迟执行刷新逻辑,确保DOM更新完成后再计算:
hideColumn() {
  this.gridColumnApi.setColumnsVisible(['make'], false);
  setTimeout(() => {
    this.gridApi.resetRowHeights();
    this.gridApi.onRowHeightChanged();
  }, 0);
}

该方案针对AG Grid 21.2.1版本的特性设计,无需升级版本即可解决动态列切换后的行高适配问题。

内容的提问来源于stack exchange,提问作者user1608841

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.05 19:10:27