Ant Design Table: 自定义单元格背景颜色根据文本内容

在 Ant Design Table 中，可以通过 customCell 属性来实现自定义单元格样式。例如，我们可以根据单元格文本内容动态改变单元格背景颜色。

以下是一个使用 customCell 属性来根据文本内容改变单元格背景颜色的示例代码：

const columns: BasicColumn[] = [{
  title: '亏盈标志',
  dataIndex: 'pdSign',
  fixed: 'left',
  customRender: function ({ text, record }) {
    let backgroundColor = '';
    if (record.pdCount > 0) {
      text = '盈';
      record.pdSign = text;
      backgroundColor = 'green'; // 盈为绿色
    } else if (record.pdCount < 0) {
      text = '亏';
      record.pdSign = text;
      backgroundColor = 'red'; // 亏为红色
    } else {
      text = '平';
      record.pdSign = text;
      backgroundColor = 'white'; // 平为白色
    }

    return <div style={{ backgroundColor }}>{text}</div>;
  },
}];

在上述示例中，我们使用 customRender 函数来动态生成单元格内容。在函数内部，根据 record.pdCount 的值来判断单元格的文本内容和背景颜色。

通过使用 style 属性和 backgroundColor 属性来设置单元格的背景颜色。根据文本内容的不同值，设置不同的 backgroundColor 值，从而实现根据文本内容改变单元格背景颜色的效果。

注意：

• customCell 属性是一个回调函数，它接收两个参数：text 和 record。text 表示单元格的文本内容，record 表示当前行的数据对象。
• style 属性是一个对象，它用来设置单元格的样式。在 style 对象中，可以使用 backgroundColor 属性来设置背景颜色。
• backgroundColor 属性可以接受任何有效的 CSS 颜色值，例如：red、#FF0000、rgb(255, 0, 0) 等。

通过使用 customCell 属性，您可以轻松地根据文本内容或其他条件来自定义单元格的样式，使其更符合您的需求。