Ant Design 自定义列的单元格字体颜色,一般财会项目可能用的的比较多。
利用 columns 的 render
属性,可以 return 一个 <span />
标签,并设置 style
,代码如下:
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: (text: string) => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
render: (text: any) => {
console.log('row', text);
return (
<div
style={{
color: text < 35 && '#24b39b' || '#000',
}}
>
{text}
</div>
);
},
},
{
title: 'Address',
dataIndex: 'address',
},
];
注意 render
方法需要写在 *.tsx
或 *.jsx
文件内,不然会报错。
未经允许不得转载:w3h5 » React & Ant Design Table组件自定义单元格文字颜色