antd表格项根据数据不同填充不同颜色

您可以通过antd表格的render方法以及CSS样式来实现根据数据不同填充不同颜色。

例如，您可以在表格中的每个单元格中使用render方法，根据单元格的值来返回不同的HTML标记，并为每个标记定义不同的CSS样式。

下面是一个示例代码片段：

import { Table } from 'antd';

const dataSource = [
  {
    name: 'John',
    age: 32,
    grade: 90,
  },
  {
    name: 'Mike',
    age: 25,
    grade: 75,
  },
  {
    name: 'Jane',
    age: 28,
    grade: 85,
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Grade',
    dataIndex: 'grade',
    key: 'grade',
    render: (text) => {
      let color = '';
      if (text >= 90) {
        color = 'green';
      } else if (text >= 80) {
        color = 'yellow';
      } else {
        color = 'red';
      }
      return <span style={{ color }}>{text}</span>;
    },
  },
];

function App() {
  return <Table dataSource={dataSource} columns={columns} />;
}

在上面的代码中，我们使用render方法来渲染“Grade”列。我们根据单元格的值来返回不同的标记（`<span>`），并使用CSS样式来定义不同的颜色。

在这个例子中，如果一个学生成绩大于等于90分，则单元格将被渲染为绿色，如果成绩大于等于80分，则将被渲染为黄色，否则将被渲染为红色。