React & Ant Design Table组件自定义单元格文字颜色
React & Ant Design Table组件自定义单元格文字颜色
德顺
发布于 2021-11-19 10:08:39
发布于 2021-11-19 10:08:39
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组件自定义单元格文字颜色
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读