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

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

​

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

代码语言：javascript复制

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',
  },
];

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

代码语言：javascript复制

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-Web前端开发资源网 » React & Ant Design Table组件自定义单元格文字颜色

react ant render table title

0 人点赞