React & Ant Design Table组件自定义单元格文字颜色

Ant Design 自定义列的单元格字体颜色,一般财会项目可能用的的比较多。

antd table.png React & Ant Design Table组件自定义单元格文字颜色 经验总结

利用 columns 的 render 属性,可以 return 一个 <span /> 标签,并设置 style ,代码如下:

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text: string) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    render: (value: any) => {
      return (
        <div
          style={{
            color: value < 35  && '#24b39b' || '#000',
          }}
        >
          {value}
        </div>
      );
    },
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

如果多个列使用同一个方法:

const ageControl = (value: string | number) => {
  return (
    <div
      style={{
        color: value < 35  && '#24b39b' || '#000',
      }}
    >
      {value}
    </div>
  );
}
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text: string) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    render: ageControl
  },
  {
    title: 'Age2',
    dataIndex: 'age2',
    render: ageControl
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

注意 render 方法需要写在 *.tsx*.jsx 文件内,不然会报错。

未经允许不得转载:前端资源网 - w3h5 » React & Ant Design Table组件自定义单元格文字颜色

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)