typescript antd中表格组件中给显示数据加上颜色
时间: 2024-10-09 17:13:29 浏览: 51
在 TypeScript 中,Ant Design 的 Table 组件允许你通过自定义列渲染函数给数据显示颜色。通常,你可以结合 `render` 或 `renderCell` 函数,以及条件逻辑或 CSS 类名动态设置样式。以下是一个基本示例:
```typescript
import { Column, Table } from 'antd';
import { FC } from 'react';
interface MyData {
status: string;
// 其他列的数据...
}
const StatusColorColumn: FC<{ dataIndex: string; title: string }> = ({ dataIndex, title }) => {
const renderCell = (record: MyData) => {
let colorClass: string = '';
switch (record.status) {
case 'success':
colorClass = 'ant-success';
break;
case 'warning':
colorClass = 'ant-warning';
break;
default:
colorClass = 'ant-info'; // 或者你想使用的默认颜色
}
return <span className={`${colorClass} text-color`}>{record.status}</span>;
};
return (
<Column
title={title}
dataIndex={dataIndex}
render={renderCell}
/>
);
};
// 使用 StatusColorColumn 在 Table 中
<Table columns={[<StatusColorColumn dataIndex="status" title="状态" />]} data={yourDataArray} />
```
在这个例子中,我们创建了一个新的 Column,当 `status` 字段的值匹配特定条件时,会应用相应的 CSS 类名,如 `.ant-success` 来改变文本颜色。