ag-grid-angular底部行仅顶部区域响应鼠标事件咨询

这是AG-Grid v26.x版本搭配domLayout="autoHeight"配置时的已知BUG，并非设计特性。根源是自动高度布局下，表格容器的高度计算存在误差，导致底部行的可交互区域被错误截断，仅顶部小范围能触发事件。新增行或排序后BUG转移到新的底部行，也印证了高度计算随数据更新动态出错的问题。

解决办法： #

• 升级版本：将ag-grid-angular升级到v27及以上，官方已在后续版本修复了该自动高度布局的事件区域计算问题。
• CSS修复（无需升级）：添加自定义CSS强制修正单元格的可点击范围：

  .ag-cell {
      pointer-events: auto !important;
      height: 100% !important;
  }
  

• 替换布局配置：如果不接受上述方案，可移除domLayout="autoHeight"，改用固定高度（比如[height]="600"）搭配滚动条或分页，避开自动高度的计算偏差，但会改变表格的原有布局形态。

你的配置示例： #

<ag-grid-angular
    [ngClass]="gridTheme"
    domLayout="autoHeight"
    [defaultColDef]="defaultColumnDef"
    [rowData]="rowData$ | async"
    [columnDefs]="columnDefs"
    rowSelection="single"
    (selectionChanged)="onSelectionChanged()"
    [frameworkComponents]="frameworkComponents"
    (gridReady)="onGridReady($event)"
    (cellValueChanged)="onUpdateEspConfig($event)"
    (cellClicked)="onCellClicked($event)"
></ag-grid-angular>

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