如何在Ant Design Table组件中为表格行添加自定义data-testid属性？

Antd Table 提供了两种稳定的方案实现行元素自定义属性挂载：

方案1：使用onRow回调（最简便） #

onRow 回调返回的对象除了事件回调外，所有自定义属性都会直接挂载到<tr>行元素上，直接在返回值里加data-testid即可：

<Table
  columns={columns}
  dataSource={dataSource}
  onRow={(record, index) => {
    return {
      // 自定义data-testid，可以结合行数据生成唯一值
      'data-testid': `table-row-${record.id || index}`
    };
  }}
/>

方案2：自定义行组件（适合复杂自定义场景） #

如果需要对行做更多定制，可以通过components属性覆盖默认的行渲染逻辑，直接给自定义行元素加属性：

// 自定义行组件
const CustomTableRow = (props) => {
  const { record, index, ...rest } = props;
  return (
    <tr 
      {...rest} 
      data-testid={`table-row-${record.id || index}`}
    />
  );
};

// Table组件使用配置
<Table
  columns={columns}
  dataSource={dataSource}
  components={{
    body: {
      row: CustomTableRow
    }
  }}
/>

注意：生成data-testid时尽量用行数据的唯一字段（比如id）作为标识，避免用索引导致数据排序/分页后标识不唯一的问题。

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