react antd 表格设置列背景色
时间: 2023-07-01 08:04:20 浏览: 146
要设置 Ant Design 的表格列背景色,可以使用 `render` 属性来自定义单元格的渲染方式。在自定义单元格时,可以设置单元格的 `style` 属性,从而实现列背景色的设置。
以下是一个示例代码:
```jsx
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: (text, record) => (
<span style={{ backgroundColor: record.age > 35 ? 'red' : 'initial' }}>
{text}
</span>
),
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const MyTable = () => {
return <Table dataSource={dataSource} columns={columns} />;
};
export default MyTable;
```
在这个示例中,我们使用 `render` 属性来自定义名为 `Name` 的列。在自定义单元格时,我们设置了单元格的 `style` 属性,根据该单元格所在行的 `age` 属性来设置背景色。当 `age` 大于 35 时,我们设置背景色为红色,否则设置为默认值。
你可以根据自己的需求,修改 `render` 方法和 `style` 属性来实现自己想要的效果。
阅读全文