如何根据值更改ANTD表中的单元格颜色？

debugcn 发表于 Dev

阿努拉格·马图尔

我有桌子，我想根据值更改该单元格的颜色。如果单元格的值大于50，则文本单元格的颜色应为红色。如果单元格值小于20，则为绿色。因此，单元格的配置应基于条件..我在此处附加代码。我是编码的新手，这是第一个项目。非常感谢有人能帮助我。

import React from 'react';
import { Divider, Table, Tag } from 'antd'
import report from './report.json'
import 'antd/dist/antd.css'
import {
  Header,
  Header1,
  TableSchema,
  Header2,
  C1,C2,C3,C4,Rank
} from './style.js'

const { Column, ColumnGroup } = Table;

const data = [
  {
    key:'0',
    class: 'All India',
    circle: 'All India',
    subHeader1: 12,
    subHeader2: 66,
    subHeader3: 32,
    subHeader4:52,
    subHeader5: 74,
    subHeader6: 32
  },
  {
    key:'0',
    class: '1',
    circle: 'GUJ',
    subHeader1: 42,
    subHeader2: 16,
    subHeader3: 70,
    subHeader4:12,
    subHeader5: 54,
    subHeader6: 33
  },
  {
    key: '1',
    class: '1',
    circle: 'DEL',
    subHeader1: 32,
    subHeader2: 66,
    subHeader3: 74,
    subHeader4:22,
    subHeader5: 42,
    subHeader6: 31
  },
]
class App extends React.Component {
  render() {
    console.log(report)
    const items = report.data.columns.map(item =>
      (
        item.subHeader ? (<ColumnGroup title={item.columnName}>
          {
            item.subHeader.map((it,index) => (
              <Column title={it.name} dataIndex={it.dataIndex} key="2" />
            ))
          }
        </ColumnGroup>) : <Column title={item.columnName} dataIndex={item.dataIndex} key="age" />
      )
     )
    return(
      <div id="root">
        <Header>
          <Header1>
            {report.header.displayName}
          </Header1>
          <Header2>
            DATA - {report.header.month}
          </Header2>
        </Header>
        <TableSchema>
        <Table dataSource={data} bordered title={() => `${report.header.displayName}` }>
          {items}
        </Table>
        </TableSchema>
      </div>
    )
  }
}

export default App;

蓝海豹

自定义表格单元格：

您可以根据特定条件更改特定单元格的颜色，您需要定位的render属性columns。

例如，如果cellAmount大于50，则将cell color渲染为red，否则green。

render(text, record) {
          return {
            props: {
              style: { background: parseInt(text) > 50 ? "red" : "green" }
            },
            children: <div>{text}</div>
          };
        }

列数组

 columns: [
      {
        title: "Date",
        dataIndex: "date",
        width: 200
      },
      {
        title: "Amount",
        dataIndex: "amount",
        width: 100,
        render(text, record) {
          return {
            props: {
              style: { background: parseInt(text) > 50 ? "red" : "green" }
            },
            children: <div>{text}</div>
          };
        }
      },
      {
        title: "Type",
        dataIndex: "type",
        width: 100
      },
      {
        title: "Note",
        dataIndex: "note",
        width: 100
      }
    ]

自定义表格行：

如果要更改行的颜色而不是单元格的颜色，则需要定位道具 rowClassName

 <Table
        bordered
        columns={columns}
        dataSource={this.data}
        rowClassName={(record, index) => (record.amount > 50 ? "red" : "green")}
      />

的CSS

.red{
  color: red; 
}
.green {
   color :green; 
}

数据

data = [
    {
      key: 0,
      date: "2018-02-11",
      amount: 40,
      type: "income",
      note: "transfer"
    },
    {
      key: 1,
      date: "2018-03-11",
      amount: 243,
      type: "income",
      note: "transfer"
    },
    {
      key: 2,
      date: "2018-04-11",
      amount: 98,
      type: "income",
      note: "transfer"
    }
  ];

这是一个演示，让我知道

更新01：

OP在评论部分询问：我想更改每列中“ may”子标题的颜色

答案：随意玩代码以符合您的期望。就您而言，您需要这样的东西吗？

background: it.name === "May" ? (parseInt(text) > 50 ? "#08AE4E" : "#f54840") :"#000"