Question

我有一张桌子，我想根据该值更改该单元格的颜色。如果单元格的值大于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;

Answer 1

自定义表格单元格：

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

例如，如果单元格columns大于Amount，则将单元格颜色渲染为50，否则为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

css

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

数据

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

这是demo，请告诉我

更新01：

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

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

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" } ];

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

1 个答案: