前端项目实战62-新增不同的表单

 {data && data.map((item, index) => (

                        <Row style={{ marginTop: "20px" }} gutter={24}>

                            <Col span={4}>

                                <Form.Item

                                    key={index}

                                    labelCol={{ span: 13 }}

                                    wrapperCol={{ span: 8, offset: 1 }}

                                    label="缸数/匹号"

                                    name={`customer${index}`}

                                    rules={[{ required: true, message: '请输入缸数/匹号' }]}

                                >

                                    <Input />

                                </Form.Item>

                            </Col>

                            <Col span={4}>

                                <Form.Item

                                    labelCol={{ span: 13 }}

                                    wrapperCol={{ span: 8, offset: 1 }}

                                    label="颜色"

                                    name={`color${index}`}

                                    rules={[{ required: true, message: '请输入颜色类型' }]}

                                >

                                    <Select

                                        style={{ width: "300px" }}

                                        placeholder="请选择颜色"

                                        optionFilterProp="children"

                                    >

                                        {sizeList && sizeList.map((item: any) => (

                                            <Option value={item.id}>{item.name}</Option>

                                        ))}

                                    </Select>

                                </Form.Item>

                            </Col>

                            <Col span={4}>

                                <Form.Item

                                    labelCol={{ span: 13 }}

                                    wrapperCol={{ span: 8, offset: 1 }}

                                    label="铺布层数"

                                    name={`step${index}`}

                                    rules={[{ required: true, message: '请输入铺布层数' }]}

                                >

                                    <Input />

                                </Form.Item>

                            </Col>

                            <Col span={4}>

                                {index===0&&(

                                    <Button onClick={handleAdd}>新增</Button>

                                )}

                                <Button onClick={()=>handleRemove(item.index)}>删除</Button>

                            </Col>

                        </Row>

                    ))}