如何根據值更改 ANTD 表中的單元格顏色？

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

我有桌子，我想根據值更改該單元格的顏色。 如果單元格的值大於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 2

當我們嘗試使用這種基於 props 的方法在 antd table 中的 td 上添加樣式屬性時，我們可能會遇到重新渲染組件的問題。

通過使用 onCell 方法，如果涉及復雜性，我們可能會解決重新渲染組件的問題。

參考使用onCell： https://github.com/ant-design/ant-design/issues/33093

我添加動態樣式的示例：

const columns = [{
          dataIndex: 'name',
          onCell: (text, record) => {
            const checkCase = text['name'].length > 50 ? 'red' : 'green;
            return {
              ['style']: {background: checkCase},
              className: 'example-class-in-td',
            };
          },
        ]

Answer 3

同樣基於單元格內容，您可以像這樣更改 backgroundColor：

  {title: "Status",
  dataIndex: "status",
  render(text, record) {
    return {
      props: {
        style: {
          background:
            record.status === "send"
              ? "red"
              : record.status === "in process"
              ? "green"
              : "white",
        },
      },
      children: <div>{text}</div>,
    };
  },}