typescript antd中变革组件中给显示数据加上颜色
时间: 2024-10-09 07:13:33 浏览: 45
在 TypeScript 和 Ant Design (AntD) 中,如果你想要动态地为数据显示数据并添加颜色,你可以使用状态管理和条件渲染来实现这个功能。AntD 提供了一套丰富的 UI 组件库,其中包括了表格(Table)等,它们通常会配合 Redux、MobX 或者其他的 state management 库一起使用。
以下是一个基本示例:
```typescript
import { Table } from 'antd';
import { useState } from 'react';
interface DataItem {
name: string;
status: string; // 这里假设 status 可能会有多种颜色对应,如 'green', 'red', 'yellow'
}
const MyTable = () => {
const [data, setData] = useState<DataItem[]>([
// 假设你的数据数组
{ name: '任务A', status: 'green' },
{ name: '任务B', status: 'red' },
{ name: '任务C', status: 'yellow' }
]);
const colorMap = {
green: 'success', // 你可能需要根据实际的颜色值映射到 Ant Design 的 CSS 类名
red: 'error',
yellow: 'warning',
};
return (
<Table dataSource={data} bordered>
<Table.Column title="名称" dataIndex="name" />
<Table.Column title="状态">
{({ record }) => (
<span style={{ color: colorMap[record.status] }}> {record.status}</span>
)}
</Table.Column>
</Table>
);
};
export default MyTable;