如何获取Antd嵌套表格中嵌套行的索引及点击行内容？

我之前也碰到过类似的需求，其实核心是给嵌套的子表格单独绑定行点击事件，而不是只依赖父级的record。Antd的Table组件提供了onRow属性，刚好能解决这个问题，直接上具体实现：

步骤1：改造子表格渲染函数 #

在你现有的renderContentTable里，给子表格添加onRow配置，用来捕获行点击事件并拿到当前行的完整数据：

renderContentTable = (parentRecord) => {
  // 假设父级record里存储子行数据的字段是`children`，替换成你实际的字段名
  const subTableData = parentRecord.children;
  
  // 子表格的列配置，沿用你原有的渲染方法
  const subColumns = this.renderBannerTable(parentRecord);

  return (
    <Table
      columns={subColumns}
      dataSource={subTableData}
      rowKey="id" // 替换成子数据里的唯一标识字段
      pagination={false} // 子表格通常不需要分页，按需调整
      onRow={(subRecord) => ({
        onClick: () => {
          // 这里的subRecord就是你点击的嵌套行的具体内容！
          console.log("点击的嵌套行数据：", subRecord);
          // 可以在这里做后续处理，比如把数据存到组件state，或者调用业务方法
          this.handleSubRowClick(subRecord);
        }
      })}
    />
  );
};

步骤2：父表格保持原有配置 #

父表格的expandedRowRender还是正常调用你的子表格渲染函数就行：

<Table
  columns={parentColumns}
  dataSource={parentData}
  rowKey="parentId" // 父数据的唯一标识字段
  expandedRowRender={(record) => this.renderContentTable(record)}
  // 其他父表格配置...
/>

补充说明 #

• onRow是Antd Table的内置属性，它接收一个函数，返回包含各种事件处理的对象（除了onClick，还支持onDoubleClick、onMouseEnter等）。
• 这里的subRecord就是子表格当前行的完整数据，完全满足你获取点击行具体内容的需求。
• 如果你的嵌套表格还有更深层级，这个方法同样适用，只需要在对应层级的子表格里重复配置onRow即可。

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