自定义 antd 的 table 单元格背景颜色

antd的版本为4.x

使用columns中的render实现

当设置背景色时，会发现背景色没有覆盖整个单元格，因为单元格的td有padding。

const renderSpeedColumn = (value: number) => {
  if (value >= 100) {
    return <div style={{ background: 'red' }}>{value}</div>
  }
  return value;
}

const columns = [
  {
    title: 速度,
    dataIndex: 'speed',
    render: (value: number) => renderSpeedColumn(value),
  },
]

使用columns中的onCell实现

根据onCell返回的className改变单元格的样式，可以完美实现想要的效果。

// index.css
.redTableCell {
  background: red;
}

// index.tsx
const renderSpeedColumn = (record: any) => {
  if (record.speed >= 100) {
    return { className: 'redTableCell' }
  }
  return {};
}

const columns = [
  {
    title: 速度,
    dataIndex: 'speed',
    onCell: (record: any) => renderSpeedColumn(record),
  },
]