antd表格项根据数据大小填充不同颜色，并填满单元格

你可以通过自定义渲染函数来实现antd表格项根据数据大小填充不同颜色，并填满单元格的效果。具体实现可以参考以下代码：

import { Table } from 'antd';

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    render: (text) => {
      const percent = (text / 100) * 100;
      const color = percent <= 30 ? '#f5222d' : percent <= 70 ? '#faad14' : '#52c41a';
      return <div style={{ backgroundColor: color, width: `${percent}%`, height: '100%', borderRadius: '5px' }}></div>;
    },
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const MyTable = () => {
  return <Table dataSource={dataSource} columns={columns} />;
};

export default MyTable;

在上述代码中，我们通过设置`render`函数来实现对`Age`列进行自定义渲染。首先，我们计算出当前单元格所代表的数据在数据范围内的百分比，然后根据不同的百分比值，设置不同的背景颜色。最后，使用`div`元素并设置其样式来实现单元格填充的效果。