Question

我在这里添加示例代码。我正在获取表格，但在文本字段之间没有空格。如何获取？

import React from "react"
import { Form, Row, Col, Input, Button, Icon } from 'antd'



class MidTermForm extends React.Component {
    render() {
        return (
            <div>
                <Row gutter={8}>
                    <Col xs={2} sm={16} md={12} lg={8} xl={10}><b>Topic</b></Col>
                    <Col xs={20} sm={4} md={6} lg={8} xl={4}><b>MaximuScore*</b></Col>
                    <Col xs={2} sm={4} md={6} lg={8} xl={10}><b>Student's Score</b></Col>
                </Row>
                <Row>
                    <Col xs={2} sm={16} md={12} lg={8} xl={10}>Written Exam</Col>
                    <Col xs={20} sm={4} md={6} lg={8} xl={4}><Input /> </Col>
                    <Col xs={20} sm={4} md={6} lg={8} xl={4}><Input /> </Col>
                </Row>
                <Row>
                    <Col xs={2} sm={16} md={12} lg={8} xl={10}>Oral Exam and Class Participation</Col>
                    <Col xs={20} sm={4} md={6} lg={8} xl={4}><Input /> </Col>
                    <Col xs={20} sm={4} md={6} lg={8} xl={4}><Input /> </Col>
                </Row>
                <Row>
                    <Col xs={2} sm={16} md={12} lg={8} xl={10}>Homework and Projects</Col>
                    <Col xs={20} sm={4} md={6} lg={8} xl={4}><Input /> </Col>
                    <Col xs={20} sm={4} md={6} lg={8} xl={4}><Input /> </Col>
                </Row>
            </div>
        )
    }

}

现在我要显示与给定的期中表格相同的表格。如何获取背景色以及如何在两个文本字段之间获取空间？

Answer 1

您可以使用antd中的Table并将自定义组件添加到它的列中，例如Form。

Codepen Working Example

const { Table, Divider, Tag, Input } = antd;

const columns = [{
  title: 'Topic',
  dataIndex: 'topic',
  key: 'topic',
  render: text => <div style={{ backgroundColor: "lightblue", padding: 10 }}>{text}</div>,
}, {
  title: 'Maximum Score',
  dataIndex: 'maxScore',
  key: 'maxScore',
  render: maxScore => <Input value={maxScore} />
}, {
  title: 'Students score',
  dataIndex: 'studentScore',
  key: 'studentScore',
  render: studentScore => <Input value={studentScore} />
}, ];

const data = [{
  key: '1',
  topic: 'Written Exam',
}, {
  key: '2',
  topic: 'Oral Exam',
}, {
  key: '3',
  topic: 'Homework Project',
}];

ReactDOM.render(<Table columns={columns} dataSource={data} pagination={false} />, mountNode);

@import 'antd/dist/antd.css';

<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.13.5/antd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container" style="padding: 24px"></div>
<script>
  var mountNode = document.getElementById('container');
</script>

Answer 2

@ laxmi- Antd提供了一些类，这些类对样式和表单的发布非常有用。使用Form.Item，它具有一些自定义边距和填充，您可以使用<col span={8}/>，也可以使用getfielddecorator

     const FormItem = Form.Item;
     <div>
<Form>

                    <Row gutter={8}>
                        <Col xs={2} sm={16} md={12} lg={8} xl={10}><b>Topic</b></Col>
                        <Col xs={20} sm={4} md={6} lg={8} xl={4}><b>MaximuScore*</b></Col>
                        <Col xs={2} sm={4} md={6} lg={8} xl={10}><b>Student's Score</b></Col>
                    </Row>
                    <Row>
                        <Col xs={2} sm={16} md={12} lg={8} xl={10}>Written Exam</Col>
                        <Col xs={20} sm={4} md={6} lg={8} xl={4}><Form.Item><Input /><Form.Item/> </Col>
                        <Col xs={20} sm={4} md={6} lg={8} xl={4}><Form.Item><Input /><Form.Item/></Col>
                    </Row>
                    <Row>
                        <Col xs={2} sm={16} md={12} lg={8} xl={10}>Oral Exam and Class Participation</Col>
                        <Col xs={20} sm={4} md={6} lg={8} xl={4}><Form.Item><Input /><Form.Item/> </Col>
                        <Col xs={20} sm={4} md={6} lg={8} xl={4}><Form.Item><Input /><Form.Item/></Col>
                    </Row>
                    <Row>
                        <Col xs={2} sm={16} md={12} lg={8} xl={10}>Homework and Projects</Col>
                        <Col xs={20} sm={4} md={6} lg={8} xl={4}><Form.Item><Input /><Form.Item/> </Col>
                        <Col xs={20} sm={4} md={6} lg={8} xl={4}><Form.Item><Input /><Form.Item/> </Col>
                    </Row>
</Form>
                </div>

Answer 3

我认为您可以在内部使用样式

  <Col style={{backgroundColor: 'rgba(255, 255, 255, 0.0)', border: 0 }} xs={2} sm={16} md={12} lg={8} xl={10}><b>Topic</b></Col>

提供背景颜色。

您还可以使用其他属性设置样式。

如何使用antd网格设计具有行和列跨距的表单？

3 个答案: