Question

我将我的react项目用于ant design 4表，任何人都知道如何为ant design表的行和列添加背景色，

谢谢

像这样

在此处编码部分

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a>,
  },
  {
    title: 'Book',
    dataIndex: 'book',
    key: 'book',
  },
  {
    title: 'Pen',
    dataIndex: 'pen',
    key: 'pen',
  },
  {
    title: 'Tools',
    key: 'tools',
    dataIndex: 'tools',

  },
  {
    title: 'Total',
    key: 'total',
       dataIndex: 'total',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    book: <Form.Item name="book1"  rules={[{required: true, message: " is required"}]}><Input style={{width: 150}}/></Form.Item>,
    pen: <Form.Item name="oen1"  rules={[{required: true, message: "is required"}]}><Input style={{width: 150}}/></Form.Item>,
   tools: <Form.Item name="tools1"  rules={[{required: true, message: " is required"}]}><Input style={{width: 150}}/></Form.Item>,
   total:'00000'
  },

];
 const onFinish = values => {
    console.log(values);
  };
ReactDOM.render( 
  <div> 
    <Form name="control-hooks" onFinish={onFinish}>
      <Table columns={columns} dataSource={data} />
      <div>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </div>
    </Form>
  </div>, document.getElementById('container'));

Answer 1

对于列，您只能在className的每个项目中使用道具columns。

例如：

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    className: 'bg-red',
    render: text => <a>{text}</a>,
  },
  {
    title: 'Book',
    dataIndex: 'book',
    key: 'book',
  },
  {
    title: 'Pen',
    dataIndex: 'pen',
    key: 'pen',
  },
  {
    title: 'Tools',
    key: 'tools',
    dataIndex: 'tools',

  },
  {
    title: 'Total',
    className: 'bg-green',
    key: 'total',
       dataIndex: 'total',
  },
];

对于行，您可以在Table组件中使用rowClassName，如下所示：

<Table rowClassName="bg-red"/>

蚂蚁设计4表行背景

1 个答案: