Ant Design Table 行悬停变色实现教程

要实现 antd Table 鼠标悬停到每一行上变色，可以使用 Table 组件的 rowClassName 属性和 css 样式来实现。

首先，在 Table 组件中设置 rowClassName 属性，将其值设为一个函数，该函数接收一个参数 record，表示当前行的数据对象。在函数中，可以根据 record 的属性来判断是否需要添加特定的 css 类名。

<Table
  dataSource={dataSource}
  columns={columns}
  rowClassName={(record, index) => {
    // 判断条件，根据 record 的属性来决定是否添加特定的 css 类名
    return record.someProperty ? 'hoverRow' : '';
  }}
/>

然后，在 css 样式文件中定义 .hoverRow 类名，并设置对应的鼠标悬停时的背景色。

.hoverRow:hover {
  background-color: #f5f5f5;
}

这样，当鼠标悬停在具有满足条件的行上时，该行的背景色就会变为 #f5f5f5。你可以根据自己的需要修改 .hoverRow 类名的样式。