在 AgGrid-React 中设置一致的 rowHeight

Question

我在反应应用程序中使用ag-grid-community:^24.1.0and 。ag-grid-react: ^24.1.1当我将rowHeight设置为25时，显示如下图。

<div className="ag-theme-alpine" style={ { height: 400, width: 600 } }>
            <AgGridReact rowSelection="multiple"
                rowData={rowData}
                rowHeight={25}>
                ...
            </AgGridReact>
        </div>

我尝试 div.ag-theme-alpine div.ag-cell{font-size: 12px !important;vertical-align: middle;}按照其他帖子中的说明进行设置，但没有任何变化。但是，当我从开发人员工具中删除以下属性时，它开始显示正常。

我想设置统一的 rowHeight（默认值除外）。如何才能实现这一目标？

Answer 1

您可以按照您的方式在属性中gridOptions或通过属性将行高设置为静态。rowHeight={25}然而，agGrid 也有一个硬编码的行高值，使得行只接受单行文本。如果除了固定值之外您还想开始更改lineHeight, 则可以将 , 更改为您喜欢的值。rowHeight

注意：如果您使用的是通常用于服务器端分页的模型，则rowHeight字段值根本不起作用，因为 agGrid 存在计算问题并且它不知道行数据的完整范围。infiniteRowrowHeightsgridHeights

如果你想改变所有单元格的 lineHeight ，你可以使用 defaultColDef 属性cellClass并传递一个类来强制lineHeight

编辑：这是我在 defaultColDef 对象中执行此操作的方法：

defaultColDef: {
      ....
      cellClass:'cell-wrap-text',
      ....
}

然后像这样定义该类：

.cell-wrap-text{
  white-space: normal !important;
  line-height: 23px !important;
}

空白行将使您的文本中断并返回到行，因为 agGrid 默认情况下不允许这样做。

这样做之后，你可以rowHeight像你已经做的那样在反应组件中设置。