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
相关产品推荐
相关产品推荐

