antd pro后台管理项目中form表单的动态添加问题

最新推荐文章于 2025-02-09 20:16:35 发布

原创最新推荐文章于 2025-02-09 20:16:35 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#react #antd pro #form #动态添加

本文详细介绍了如何在基于AntdPro的后台管理系统中实现动态表单，通过使用Form.List组件，可以轻松地添加和删除字段，满足员工档案、紧急联系人等信息的编辑需求。

在做的一个基于antd pro开发的一个后台管理系统中遇到这样一个需求,员工档案部分的地址信息,紧急联系人,教育经历需要编辑添加多段,因此遇到了antd中的form表单里面添加多个字段的问题,具体需求以及实现如下:
在这里插入图片描述

经过查阅官方文档,可以通过Form.List,以及内部提供的API来实现
下面附上源码

     <Form
        {...layout}
        form={form}
        name={props.titleid}
        onFinish={onFinish}
        initialValues={contectInfo}
      >
        <Row>
          <Col span={8}>
            {
             Object.keys(contectTitle).slice(0,3).map(item=>{
              if(contectTitle[item]==="姓名" || contectTitle[item]==="关系"){
                return (
                  <Form.Item name={item} 
                  label={contectTitle[item]} 
                  rules={[{ required:true, message: '请输入' }]}
                  key={`${item+Math.random()}`} hasFeedback>
                  <Input placeholder="请输入" />
                </Form.Item>
                )
              }
                return(
                  <Form.Item
                  name={item}
                  label={contectTitle[item]}
                  key={`${item+Math.random()}`}
                  rules={[{  message: '请输入' }]}
                >
                  <Input placeholder="请输入" />
                </Form.Item>
                )
             })  
            }
          </Col>
          <Col span={8}>
          {
             Object.keys(contectTitle).slice(3,6).map(item=>{
              if(contectTitle[item]==="是否重要" ){
                return (
                  <Form.Item name={item} 
                  label={contectTitle[item]} 
                  rules={[{ required:true, message: '请输入' }]}
                  key={`${item+Math.random()}`} hasFeedback>
                    <Radio.Group>
                      <Radio value="a">是</Radio>
                      <Radio value="b">否</Radio>
                    </Radio.Group>
                </Form.Item>
                )
              }
                return(
                  <Form.Item
                  name={item}
                  label={contectTitle[item]}
                  key={`${item+Math.random()}`}
                  rules={[{  message: '请输入' }]}
                >
                  <Input placeholder="请输入" />
                </Form.Item>
                )
             })  
            }
          </Col>
          <Col span={8}>
 
            {
             Object.keys(contectTitle).slice(6).map(item=>{
                return(
                  <Form.Item
                  name={item}
                  key={`${item+Math.random()}`}
                  label={contectTitle[item]}
                  rules={[{  message: '请输入' }]}
                >
                  <Input placeholder="请输入" />
                </Form.Item>
                )
             })  
            }
          </Col>
        </Row>
        <Row>
            <Col span={24}>
            <Divider dashed />

            </Col>
        </Row>
        //以下为动态添加的表单的代码,
   <Form.List name="names" >
    {(fields, { add, remove }) => {
      console.log("fields",fields)
      return (
        <div>
          {fields.map((field, index) => (
            <div key={field.key}>
              <Row>
                  <Col span={8}>
                    {
                      Object.keys(contectTitle).slice(0,3).map(item=>{
                      if(contectTitle[item]==="姓名" || contectTitle[item]==="关系"){
                        console.log(8888,field.name)
                        return (
                          <Form.Item 
                          name={[field.name, item]} //必须每个都添加上
                          label={contectTitle[item]} 
                          fieldKey={[field.fieldKey, "lastName"]}                         
                          rules={[{ required:true, message: '请输入' }]}
                            key={`${item+Math.random()}`}//必须每个都添加上hasFeedback>
                          <Input placeholder="请输入" />
                        </Form.Item>
                        )
                      }
                        return(
                          <Form.Item
                          name={[field.name, item]}
                          label={contectTitle[item]}
                          fieldKey={[field.fieldKey, "lastName"]}
                          key={`${item+Math.random()}`}
                          rules={[{  message: '请输入' }]}
                        >
                          <Input placeholder="请输入" />
                        </Form.Item>
                        )
                      })  
                    }
                  </Col>
                  <Col span={8}>
                  {
                      Object.keys(contectTitle).slice(3,6).map(item=>{
                      if(contectTitle[item]==="是否重要" ){
                        return (
                          <Form.Item name={[field.name, item]}
                          label={contectTitle[item]} 
                          rules={[{ required:true, message: '请输入' }]}
                          key={`${item+Math.random()}`}
                          fieldKey={[field.fieldKey, "lastName"]}
                           hasFeedback>
                            <Radio.Group>
                              <Radio value="a">是</Radio>
                              <Radio value="b">否</Radio>
                            </Radio.Group>
                        </Form.Item>
                        )
                      }
                        return(
                          <Form.Item
                          name={[field.name, item]}
                          label={contectTitle[item]}
                          key={`${item+Math.random()}`}
                          fieldKey={[field.fieldKey, "lastName"]}
                          rules={[{  message: '请输入' }]}
                        >
                          <Input placeholder="请输入" />
                        </Form.Item>
                        )
                      })  
                    }
                  </Col>
                  <Col span={8}>

                    {
                      Object.keys(contectTitle).slice(6).map(item=>{
                        return(
                          <Form.Item
                          name={[field.name, item]}
                          label={contectTitle[item]}
                          key={`${item+Math.random()}`}
                          fieldKey={[field.fieldKey, "lastName"]}
                          rules={[{  message: '请输入' }]}
                        >
                          <Input placeholder="请输入" />
                        </Form.Item>
                        )
                      })  
                    }
                  </Col>
                </Row>
                <Row>
                    <Col span={24}>
                    <Divider dashed />
                    <Form.Item>
                      {fields.length > 0 ? (
                      <MinusCircleOutlined
                        className="dynamic-delete-button"
                        style={{ margin: '0 8px' }}
                        onClick={() => {
                          remove(field.name);
                        }}
                      />
                    ) : null}
                    </Form.Item>  
                    </Col>
                </Row>
                </div>

          ))}
          <Form.Item>
            <Button 
            type="link" 
            onClick={() => {
              add();
            }}
            >
                +添加
              </Button>
          </Form.Item>
        </div>
      );
    }}
  </Form.List>