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

您可以通过自定义渲染函数的方式来实现根据'pdSign'设置单元格背景颜色。具体步骤如下:

  1. 在表格组件中,给需要设置背景颜色的列添加一个'render'属性,值为自定义渲染函数。
const columns = [
  {
    title: '亏盈标志',
    dataIndex: 'pdSign',
    fixed: 'left',
    render: function (text, record) {
      if (record.pdCount > 0) {
        text = '盈';
        record.pdSign = text;
        return text;
      } else if (record.pdCount < 0) {
        text = '亏';
        record.pdSign = text;
        return text;
      } else {
        text = '平';
        record.pdSign = text;
        return text;
      }
    },
  },
  // 其他列...
];
  1. 在自定义渲染函数中,根据'pdSign'的值来设置单元格的背景颜色。
const columns = [
  {
    title: '亏盈标志',
    dataIndex: 'pdSign',
    fixed: 'left',
    render: function (text, record) {
      if (record.pdCount > 0) {
        text = '盈';
        record.pdSign = text;
        return <span style={{ backgroundColor: 'green' }}>{text}</span>;
      } else if (record.pdCount < 0) {
        text = '亏';
        record.pdSign = text;
        return <span style={{ backgroundColor: 'red' }}>{text}</span>;
      } else {
        text = '平';
        record.pdSign = text;
        return <span>{text}</span>;
      }
    },
  },
  // 其他列...
];

在上述代码中,通过给<span>标签添加style属性来设置背景颜色。当'pdSign'为盈时,背景颜色为绿色;当'pdSign'为亏时,背景颜色为红色;当'pdSign'为平时,没有设置背景颜色。

注意:上述代码中的样式设置仅为示例,实际开发中可以根据需求进行调整。

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

原文地址: http://www.cveoy.top/t/topic/qtUj 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录