antd组件Table单独设置某个单元格的背景色？简单即食

骚操作设置单元格背景色

实现的效果图如下：

思路： 直接通过render，设置里层div的样式即可

jsx

const getColumns = columns => {
        return columns.map((col, index) => {
            return {
                dataIndex: col.filedName,
                title: col.name,
                align: "center",
                render: (col, record, indx) => {
                    const isError = col.errorCode > 0;
                    return (
                        <div className={isError ? "error-td-bg" : ""}>
                            {isError ? (
                                <Tooltip overlayClassName="async_tip_error" title={<div dangerouslySetInnerHTML={{ __html: (col.errorMsg??"")?.replace('\n','<br/>') }} />}>
                                    <div style={{ color: "#FF5252" }}>{col?.data}</div>
                                    {isError && <div style={{ color: isError ? "#FF5252" : "" }}>({col?.errorType})</div>}
                                </Tooltip>
                            ) : (
                                <span>{col?.data}</span>
                            )}
                        </div>
                    );
                }
            };
        });

<div dangerouslySetInnerHTML={{ __html: (col.errorMsg??"")?.replace('\n','<br/>') }} />

这里为了解决tip文本中换行的问题；

css部分：

.align-center {
    display: flex;
    align-items: center;
}
table tr td {
    position: relative;
    .error-td-bg {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: rgba(255,82,82,0.1);
        .align-center();
        justify-content: center;
    }
 }