antd-table changes font color according to cell value
When the department is the leadership team, let the text in the cell turn red
Before changing:
//table表头
const columns = [
{
title: '姓名',
// position: 'fixed',
fixed: 'left',
dataIndex: 'name',
key: 'name',
width: 100
},
{
title: '职务',
dataIndex: 'position',
key: 'position',
width: 100
},
{
title: '分工',
dataIndex: 'work',
key: 'work',
width: 200,
ellipsis: {
showTitle: false,
},
render: work => (
<Tooltip placement="topLeft" title={
work}>
{
work}
</Tooltip>
)
},
{
title: '部门',
// fixed: 'right',
dataIndex: 'department',
key: 'department',
width: 150,
render: text => text === '领导班子'? <span style={
{
color: 'red'}}>{
text}</span>:
<span style={
{
color: 'black'}}>{
text}</span>
},
{
title: '操作',
key: 'operation',
fixed: 'right',
width: 100,
render: (text, record) =>
<Space size="middle">
<Tooltip title="编辑">
<Button
type="primary"
shape="circle"
icon={
<EditOutlined />}
onClick={
()=>this.handleEdit(record)}/>
</Tooltip>
<Tooltip title="删除">
<Button
type="danger"
shape="circle"
icon={
<DeleteOutlined />}
onClick={
()=>this.handleDelete(record)}/>
</Tooltip>
</Space>
}
];
After change: