Ant Design 表格:根据亏盈标志设置单元格背景颜色
Ant Design 表格:根据亏盈标志设置单元格背景颜色
您可以通过自定义渲染函数的方式来实现根据'pdSign'设置单元格背景颜色。具体步骤如下:
- 在表格组件中,给需要设置背景颜色的列添加一个'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;
}
},
},
// 其他列...
];
- 在自定义渲染函数中,根据'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'为平时,没有设置背景颜色。
注意:上述代码中的样式设置仅为示例,实际开发中可以根据需求进行调整。
原文地址: http://www.cveoy.top/t/topic/qtUj 著作权归作者所有。请勿转载和采集!