AG-Grid动态服务端数据场景下多行文本行高无法自适应问题

问题场景 #

在Angular应用中使用AG-Grid加载服务端动态数据时，包含多行文本（如地址）的列出现文本重叠、压缩问题，滚动操作仅能临时缓解，需要实现行高根据内容自动适配。

已尝试方案 #

• 为目标列配置wrapText: true和autoHeight: true属性
• 数据渲染完成后调用resetRowHeights()方法

解决步骤 #

1. 排查全局行高配置冲突

首先确认AG-Grid的全局配置中是否设置了固定rowHeight，该配置会覆盖列级的autoHeight设置，必须移除或设为undefined：

gridOptions = {
  // 移除或注释掉固定行高配置
  // rowHeight: 30,
  // 其他配置...
};

目标列的正确配置示例：

columnDefs = [
  // 其他列定义
  {
    headerName: '地址',
    field: 'address',
    wrapText: true,
    autoHeight: true,
    minWidth: 220, // 可选：设置列最小宽度，避免文本挤压
    minHeight: 40  // 可选：设置行最小高度
  }
];

2. 确保行高重计算时机正确

服务端数据异步加载后，DOM元素可能未完全渲染，仅调用resetRowHeights()无法触发正确计算，需配合异步延迟或AG-Grid事件：

• 方案一：在数据加载完成后使用setTimeout触发

private gridApi: GridApi;

onGridReady(params: GridReadyEvent) {
  this.gridApi = params.api;
  // 加载服务端数据
  this.addressService.getList().subscribe(rowData => {
    this.rowData = rowData;
    // 等待DOM渲染完成后重计算行高
    setTimeout(() => {
      this.gridApi?.resetRowHeights();
      // 可选：适配列宽
      this.gridApi?.sizeColumnsToFit();
    }, 0);
  });
}

• 方案二：监听rowDataChanged事件自动触发

gridOptions = {
  rowDataChanged: (params) => {
    setTimeout(() => {
      params.api.resetRowHeights();
    }, 0);
  }
};

3. 修复CSS样式冲突

自定义CSS可能阻止文本换行，需确保单元格样式支持换行：

.ag-cell {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

避免设置white-space: nowrap这类会强制单行显示的样式。

4. 虚拟滚动场景优化（可选）

滚动后行高恢复是因为AG-Grid虚拟滚动默认仅渲染可视区域行，未渲染行的行高未计算。若数据量较小，可禁用虚拟滚动彻底解决：

gridOptions = {
  suppressRowVirtualisation: true,
  rowModelType: 'clientSide'
};

数据量大时不建议禁用，优先使用步骤2的时机触发重计算。

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