antd表格项根据数据不同填充不同颜色
时间: 2024-03-26 17:40:39 浏览: 17
您可以通过antd表格的render函数来实现根据数据不同填充不同颜色的需求。具体的实现步骤如下:
1. 在columns中定义需要填充颜色的列,设置render函数;
2. 在render函数中判断当前数据的值,根据不同的条件返回不同的颜色值;
3. 在返回的JSX元素中设置style属性,将颜色值作为background或color属性的值即可。
以下是一个示例代码,其中根据数据的值,将表格中的“状态”一列分别填充为绿色、橙色或红色。
```
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
status: 1,
},
{
key: '2',
name: 'Jim Green',
age: 42,
status: 2,
},
{
key: '3',
name: 'Joe Black',
age: 32,
status: 3,
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Status',
dataIndex: 'status',
key: 'status',
render: (text) => {
let bgColor = '';
switch (text) {
case 1:
bgColor = 'green';
break;
case 2:
bgColor = 'orange';
break;
case 3:
bgColor = 'red';
break;
default:
break;
}
return (
<span style={{ background: bgColor, color: '#fff', padding: '4px 10px', borderRadius: '4px' }}>
{text}
</span>
);
},
},
];
function App() {
return (
<Table dataSource={dataSource} columns={columns} />
);
}
export default App;
```