Ant Design Table: 设置单元格颜色根据盈亏标志

使用 Ant Design Table 设置单元格颜色根据盈亏标志

本文将介绍如何使用 Ant Design Table 组件，根据盈亏标志（pdSign）动态设置单元格颜色，例如盈为绿色，亏为红色。

通过 customRender 函数实现

你可以通过在 customRender 函数中设置单元格的 style 属性来实现单元格颜色的设置。

首先，在 customRender 中根据 pdSign 的值设置对应的颜色。例如，当 pdSign 的值为 '盈' 时，设置 color 属性为 'green'；当 pdSign 的值为 '亏' 时，设置 color 属性为 'red'。然后，将 style 对象作为返回值的属性之一，将其传递给单元格的 style 属性。

以下是示例代码：

customRender: function ({ text, record }) {
  let style = {};
  if (record.pdCount > 0) {
    text = '盈';
    record.pdSign = text;
    style.color = 'green';
    return {
      children: text,
      props: {
        style: style
      }
    };
  } else if (record.pdCount < 0) {
    text = '亏';
    record.pdSign = text;
    style.color = 'red';
    return {
      children: text,
      props: {
        style: style
      }
    };
  } else {
    text = '平';
    record.pdSign = text;
    return text;
  }
}

这样，在渲染表格时，当 pdSign 的值为 '盈' 时，单元格文字将显示为绿色；当 pdSign 的值为 '亏' 时，单元格文字将显示为红色。

注意:

• 在实际应用中，你可能需要根据自己的需求调整颜色和 pdCount 的比较条件。
• 此方法适用于 Ant Design Table 组件的 columns 配置中。