AG Grid能否实现无需展开的多行逻辑行？

完全可以实现你要的效果，而且不需要复杂CSS，用AG Grid自带的master-detail功能就能快速搞定，步骤如下：

核心配置思路 #

利用master-detail的默认展开+隐藏展开箭头，让详情内容默认显示，同时保持主行与详情行的逻辑关联（悬停、选中、排序时视为单行）。

1. 具体代码配置 #

const gridOptions = {
  masterDetail: true,
  // 自定义详情内容的渲染逻辑
  detailCellRenderer: params => {
    const detailContainer = document.createElement('div');
    detailContainer.style.padding = '12px 16px';
    detailContainer.innerHTML = `
      <div>订单编号：${params.data.orderId}</div>
      <div>客户备注：${params.data.customerNote}</div>
      <div>物流信息：${params.data.logisticsInfo}</div>
    `;
    return detailContainer;
  },
  // 网格加载完成后默认展开所有行的详情
  onGridReady: params => {
    params.api.forEachNode(node => node.setExpanded(true));
  },
  // 直接隐藏默认的展开/收起箭头列
  suppressExpandColumn: true,
  // 用内置配置调整详情行样式，无需复杂CSS
  detailRowStyle: {
    background: '#f8f9fa',
    borderTop: '1px solid #e9ecef'
  }
};

2. 关键配置说明 #

• suppressExpandColumn: true：直接隐藏默认的展开箭头列，不用写CSS隐藏元素
• onGridReady中的setExpanded(true)：让所有行的详情默认展示，无需用户手动点击
• detailCellRenderer：完全自定义详情内容的结构和样式，适配你的业务需求
• detailRowStyle：通过AG Grid内置的样式配置调整详情行外观，避免全局CSS污染

3. 操作逻辑保障 #

master-detail模式下，主行与详情行默认是关联的：

• 悬停主行时，详情行会同步触发悬停样式
• 选中主行时，详情行也会被标记为选中状态
• 排序、过滤操作仅基于主行数据，详情行会随主行同步移动

替代方案（无需master-detail） #

如果不想依赖master-detail，也可以通过自定义行高+跨列单元格实现：

• 配置getRowHeight返回足够容纳主内容+详情的高度
• 给某一列设置colSpan: params.columnApi.getAllColumns().length，在该列的cellRenderer中同时渲染主内容和详情
• 这种方式需要自行处理行内布局，但同样能实现逻辑单行的效果，不过master-detail方案更省心

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