antd-table changes font color according to cell value

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:
insert image description here

//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:
insert image description here

Guess you like

Origin blog.csdn.net/qq_42571665/article/details/122209383