蚂蚁 Form.List |我可以在上面添加标签吗？只有一行，不重复

Question

我有 Form.list 如下所示

before

我想要标签在上面，像这样

I wish

可能吗？ 不知道用哪个组件..

Answer 1

您可以使用 antd 中的 Row & Col 来布局您的列表标签。

import { PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Row, Col, Typography } from 'antd';

function App() {
    return (
        <div className='container my-4'>
            <Form>
                <Form.List name='names'>
                    {(fields, { add, remove }) => (
                        <>
                            {!!fields.length && (
                                <Row align='middle'>
                                    <Col span={5} style={{ textAlign: 'center' }}>
                                        <Typography.Text>Subnet</Typography.Text>
                                    </Col>
                                    <Col span={5} style={{ textAlign: 'center' }}>
                                        <Typography.Text>Netmask</Typography.Text>
                                    </Col>
                                    <Col span={5} style={{ textAlign: 'center' }}>
                                        <Typography.Text>Router</Typography.Text>
                                    </Col>
                                    <Col span={5} style={{ textAlign: 'center' }} />
                                    <Col span={4} />
                                </Row>
                            )}
                            {fields.map((field, index) => (
                                <Row key={index}>
                                    <Col span={5}>
                                        <Form.Item {...field} style={{ margin: '5px' }}>
                                            <Input placeholder='10.40.0.0' style={{ width: '100%' }} />
                                        </Form.Item>
                                    </Col>
                                    <Col span={5}>
                                        <Form.Item {...field} style={{ margin: '5px' }}>
                                            <Input placeholder='255.255.255.0' style={{ width: '100%' }} />
                                        </Form.Item>
                                    </Col>
                                    <Col span={5}>
                                        <Form.Item {...field} style={{ margin: '5px' }}>
                                            <Input placeholder='10.40.0.1' style={{ width: '100%' }} />
                                        </Form.Item>
                                    </Col>
                                    <Col span={5}>
                                        <Form.Item {...field} style={{ margin: '5px' }}>
                                            <Input placeholder='IP Pool' style={{ width: '100%' }} />
                                        </Form.Item>
                                    </Col>
                                    <Col span={4}>
                                        <Form.Item {...field} style={{ margin: '5px' }}>
                                            <Button onClick={() => remove(field.name)}>Delete</Button>
                                        </Form.Item>
                                    </Col>
                                </Row>
                            ))}

                            <Button type='dashed' onClick={() => add()} icon={<PlusOutlined />} style={{ margin: '5px' }}>
                                Add Subnet
                            </Button>
                        </>
                    )}
                </Form.List>
            </Form>
        </div>
    );
}

export default App;