ant design table改变每行数据的背景色

在Ant Design Table组件中，如果你想改变表格中每一行数据的背景色，你可以通过自定义单元格渲染函数来实现这个功能。首先，你需要创建一个React组件，它接收`record`作为props，并返回一个带有动态背景色的`<tr>`元素。

例如，你可以根据`record`中的某个字段值来设置背景色：

import { Table } from 'antd';

const CustomCell = ({ record }) => {
  const backgroundColor = getBackgroundColor(record); // 这里是一个计算背景色的函数

  return (
    <td style={{ background-color: backgroundColor }}>
      {record[fieldName]} {/* 替换为你要显示的数据字段 */}
    </td>
  );
};

const MyTable = () => {
  const data = ...; // 表格数据

  const columns = [
    {
      title: '标题',
      dataIndex: 'columnTitle', // 数据索引
      cell: CustomCell, // 使用自定义单元格
    },
    // 其他列...
  ];

  return (
    <Table columns={columns} dataSource={data} rowClassName={(record) => `custom-row-${getUniqueId(record)}`} />
  );

  // 这里的rowClassName属性用于应用自定义样式到每一行，getUniqueId可以根据需要生成唯一的ID
  // 注意：如果不想全局影响，可以将背景色样式封装成单独的CSS类并在`rowClassName`中引用
  // 示例：`custom-row-${getUniqueId(record)} custom-bg`
};

function getBackgroundColor(record) {
  // 根据record中的数据计算背景色，这里只是一个示例，替换为你实际的需求逻辑
  if (record.status === 'important') {
    return '#ff0000'; // 红色背景
  } else {
    return '#ffffff'; // 默认白色背景
  }
}

function getUniqueId(record) {
  // 生成一个唯一的ID，这里只是简单地返回字符串形式的索引，你可以换成其他更复杂的方式
  return String(record.key || record.index);
}

// 使用MyTable组件展示带有动态背景色的表格