antd中Form深层绑定，Form.List+Table

已于 2025-05-09 10:19:26 修改
阅读量936 收藏 16
点赞数 11
文章标签： list javascript 前端
于 2024-11-19 09:53:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Pluto_fxy/article/details/143862341
版权

Form.List 利用Form.Item的name来深层绑定

name为索引数组，[index,name] : [数据的第几个（从0开始），数据绑定参数名]

合起来代表的含义： map[index].name

name绑定正确才能触发form的校验和绑定

最简单的使用：

只使用FornList

下述代码可以生成一个可增删的列表

fields为jonData数组处理后的数据，fileld.name即数据绑定的index，form根据该数据来进行增删

      <Form
        ref={formvalue}
        form={form}
        autoComplete="off"
        initialValues={{
          jonData: [
            {
              building: "22",
              version: "",
            },
          ],
        }}
      >
        <Form.List name="jonData">
          {(fields, { add, remove }) => (
            <div
              style={{
                display: "flex",
                rowGap: 16,
                flexDirection: "column",
              }}
            >
              {fields.map((field) => (
                <Card
                  size="small"
                  title={`Item ${field.name + 1}`}
                  key={field.key}
                  extra={
                    <CloseOutlined
                      onClick={() => {
                        remove(field.name);
                      }}
                    />
                  }
                >
                  <Form.Item label="building" name={[field.name, "building"]}>
                    <Input />
                  </Form.Item>
                  <Form.Item label="version" name={[field.name, "version"]}>
                    <Input />
                  </Form.Item>
                </Card>
              ))}

              <Button type="dashed" onClick={() => add()} block>
                + Add Item
              </Button>
            </div>
          )}
        </Form.List>
      </Form>

 深层嵌套：

在Form中本身支持嵌套模式，其实现也同样依赖于name数组

下述代码用 name={[field.name, "doorButton", "frontOpen"]}绑定了jonData中每一项的doorButton.frontOpen

  <Form
        ref={formvalue}
        form={form}
        autoComplete="off"
        initialValues={{
          jonData: [
            {
              building: "22",
              version: "0101",
              doorButton: {
                frontOpen: 0,
                backOpen: 1,
              },
            },
          ],
        }}
      >
        <Form.List name="jonData">
          {(fields, { add, remove }) => (
            <div
              style={{
                display: "flex",
                rowGap: 16,
                flexDirection: "column",
              }}
            >
              {fields.map((field) => (
                <Card
                  size="small"
                  title={`Item ${field.name + 1}`}
                  key={field.key}
                  extra={
                    <CloseOutlined
                      onClick={() => {
                        remove(field.name);
                      }}
                    />
                  }
                >
                  <Form.Item label="楼栋" name={[field.name, "building"]}>
                    <Input />
                  </Form.Item>
                  <Form.Item label="version" name={[field.name, "version"]}>
                    <Input />
                  </Form.Item>
                  <Form.Item
                    label='深层绑定'
                    name={[field.name, "doorButton", "frontOpen"]}
                  >
                    <InputNumber min={0} placeholder={translate["请输入"]} />
                  </Form.Item>
                </Card>
              ))}

              <Button type="dashed" onClick={() => add()} block>
                + Add Item
              </Button>
            </div>
          )}
        </Form.List>
      </Form>

 动态数据更新

如果需要某一部分随着表单中的某一项的值改变而改变，form提供了shouldUpdate

prevValues为之前的值, currentValues为改变之后的值，同样使用name绑定的层级来获取

 getFieldValue([*,*,*])可以获取某个字段的值-实时变化-用以shouldUpdate更新，必须用该函数包裹dom才会更新

<Form.Item
   // 楼栋信息变化--此组件包裹的内容将调用更新
   shouldUpdate={(prevValues, currentValues) =>
      prevValues.jonData[field.name]?.building !==
      currentValues.jonData[field.name]?.building
     }
 >
   {/* getFieldValue([*,*,*])可以获取某个字段的值-实时变化-用以shouldUpdate更新 */}
    {({ getFieldValue }) =>
          getFieldValue(["jonData", field.name, "building"]) !=="building" ? (
             <>
                 <Form.Item label="key" name={[field.name, "key"]}>
                     <Input />
                 </Form.Item>
                  <Form.Item
                   label="deviceId"
                    name={[field.name, "deviceId"]}
                  >
                     <Input />
                  </Form.Item>
              </>
             ) : null
                    }
</Form.Item>

多层Form.List 

我们可以在list中嵌套list，正如上述的fields遍历一样，form.item绑定了name，即可在该层级上拿到绑定数据，用绑定数据来遍历

示例：

下方代码，floorMap即二层绑定

 <Form
        ref={formvalue}
        form={form}
        autoComplete="off"
        initialValues={{
         jonData: [
        {
          building: "22",
          version: "0101",
          doorButton: {
            frontOpen: 0,
            backOpen: 1, 
          },
          floorMap: [
            {
              floor: 1,
            },
          ],
        },
      ],
        }}
      >
        <Form.List name="jonData">
          {(fields, { add, remove }) => (
            <div
              style={{
                display: "flex",
                rowGap: 16,
                flexDirection: "column",
              }}
            >
              {fields.map((field) => (
                <Card
                  size="small"
                  title={`Item ${field.name + 1}`}
                  key={field.key}
                  extra={
                    <CloseOutlined
                      onClick={() => {
                        remove(field.name);
                      }}
                    />
                  }
                >
                  <Form.Item label="楼building" name={[field.name, "building"]}>
                    <Input />
                  </Form.Item>
                  <Form.Item label="version" name={[field.name, "version"]}>
                    <Input />
                  </Form.Item>
                  <Form.Item label="floorMap">
                    <Form.List name={[field.name, "floorMap"]}>
                      {(subFields, subOpt) => (
                        <>
                          {subFields.map((subField) => (
                            <Space key={subField.key}>
                              <Form.Item
                                noStyle
                                name={[subField.name, "floor"]}
                              >
                                <Input placeholder="floor" />
                              </Form.Item>
                              <CloseOutlined
                                onClick={() => {
                                  subOpt.remove(subField.name);
                                }}
                              />
                            </Space>
                          ))}
                          <Button
                            type="dashed"
                            onClick={() => subOpt.add()}
                            block
                          >
                            + Add Sub Item
                          </Button>
                        </>
                      )}
                    </Form.List>
                  </Form.Item>
                </Card>
              ))}

              <Button type="dashed" onClick={() => add()} block>
                + Add Item
              </Button>
            </div>
          )}
        </Form.List>
      </Form>

双层可编辑表格绑定 

将表格中的可编辑的表单与form绑定，直接利用form的表单绑定与校验，可节省很多开发时间

用antd的table ，将tr td单拆出来，name绑定原理也是当层[index，参数名]

table的表格数据绑定即本层的floorMap----subFields

实例：

完整代码： 

import React, { useContext, useEffect, useRef, useState } from "react";
import { Button, Form, Input, Card, Table, Space } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import "./index.scss";

const ExitTable = () => {
  const [form] = Form.useForm();
  const formvalue = useRef(null);
  const handleSubmit = () => {
    console.log(222222, form.getFieldsValue());
  };
  //表格配置
  const defaultColumns = [
    {
      title: "floor",
      dataIndex: "floor",
      width: "30%",
      editable: true,
    },
    {
      title: "floorName",
      dataIndex: "floorName",
      editable: true,
    },
    {
      title: "删除",
      dataIndex: "delete",
      editable: true,
    },
  ];
  const columns = defaultColumns.map((col, index) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        col: col,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
      }),
    };
  });

  useEffect(() => {
    form.setFieldsValue({
      jonData: [
        {
          liftId: 1,
          type: "",
          building: "22",
          version: "0101",
          key: "xsxsx",
          deviceId: "xsx",
          doorButton: {
            frontOpen: 0,
            backOpen: 1, 
          },
          floorMap: [
            {
              floor: 1,
            },
          ],
        },
      ],
    });
  }, []);
  return (
    <div>
      <Form
        ref={formvalue}
        labelCol={{
          span: 5,
        }}
        wrapperCol={{
          span: 18,
        }}
        form={form}
        name="dynamic_form_complex"
        style={{
          maxWidth: 700,
        }}
        autoComplete="off"
        initialValues={{
          jonData: [],
        }}
      >
        <Form.List name="jonData">
          {(fields, { add, remove }) => (
            <div
              style={{
                display: "flex",
                rowGap: 16,
                flexDirection: "column",
              }}
            >
              {fields.map((field) => (
                <Card
                  size="small"
                  title={`Item ${field.name + 1}`}
                  key={field.key}
                  extra={
                    <CloseOutlined
                      onClick={() => {
                        remove(field.name);
                      }}
                    />
                  }
                >
                  <Form.Item label="building" name={[field.name, "building"]}>
                    <Input />
                  </Form.Item>
                  <Form.Item label="version" name={[field.name, "version"]}>
                    <Input />
                  </Form.Item>
                  <Form.Item label="floorMap">
                    <Form.List name={[field.name, "floorMap"]}>
                      {(subFields, subOpt) => (
                        <>
                          <Button
                            onClick={() => {
                              subOpt.add();
                            }}
                          >
                            新增
                          </Button>
                          <Table
                            components={{
                              body: {
                                cell: ({
                                  title,
                                  editable,
                                  children,
                                  dataIndex,
                                  record,
                                  col,
                                  ...restProps
                                }) => {
                                  return (
                                    <td {...restProps}>
                                      {record && dataIndex == "delete" ? (
                                        <Button
                                          onClick={() => {
                                            subOpt.remove(record.name);
                                          }}
                                        >
                                          删除
                                        </Button>
                                      ) : (
                                        record && (
                                          <Form.Item
                                            style={{
                                              margin: 0,
                                            }}
                                            name={[record.name, dataIndex]}
                                            // rules={[
                                            //   {
                                            //     required: true,
                                            //     message: `${title} is required.`,
                                            //   },
                                            // ]}
                                          >
                                            <Input />
                                          </Form.Item>
                                        )
                                      )}
                                    </td>
                                  );
                                },
                              },
                            }}
                            rowClassName={() => "editable-row"}
                            bordered
                            dataSource={subFields}
                            columns={columns}
                            rowKey="key"
                            pagination={false}
                          />
                        </>
                      )}
                    </Form.List>
                  </Form.Item>
                </Card>
              ))}

              <Button type="dashed" onClick={() => add()} block>
                + Add Item
              </Button>
            </div>
          )}
        </Form.List>
      </Form>

      <Button onClick={handleSubmit}>提交</Button>
    </div>
  );
};
export default ExitTable;

一些常用函数 

1.设置表单值（）

设置表单值--总体设置setFieldsValue

form.setFieldsValue({

      jonData: [

        {

          building: "22",

          version: "0101",

          doorButton: {

            frontOpen: 0,

            backOpen: 1,

          },

        },

      ],

    });

 设置指定位置的值 --单个设置  setFieldValue

 form.setFieldValue(

                                      [

                                        "jonData",

                                        field.name,

                                        "floorMap",

                                        subField.name,

                                        "floorKey",

                                      ],

                                     '新值'

                                    );

                                  }}

2.获取表单值

获取全部表单的值getFieldsValue

form.getFieldsValue()

获取指定位置的值 getFieldValue

  form.getFieldValue([

                                          "jonData",

                                          field.name,

                                          "building",

           ])

3.触发表单校验validateFields

  form.validateFields().then(()=>{}).catch(()=>{})

表单校验失败滚动到初始位置

  form.validateFields().then(()=>{}).catch((error)=>{

form.scrollToField(error.errorFields[0].name) 

})

Pluto_fan
关注
antd中的Form、FormItem、FormList、FormList + Table详解
hole_diss的博客
11-16 2103
Form是高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
Form.list + Table实现可编辑表格，添加，删除，上移下移
rcx0113的博客
03-27 600
【代码】Form.list + Table实现可编辑表格，添加，删除，上移下移。
【Antd】Form.List的强大之处，Form.List使用方式细微讲解
hzxOnlineOk的博客
09-05 2176
其实，antd的form实例对象很强，只需要提供给它指定的field和索引i组成的formName（表单项名称）即可自动回填到表单项中，完全不需要人工干预去处理多层级的数据的，如果有需要转换数据结构，也可以先对form实例的指定表单属性进行数据处理，之后再赋值回该属性名即可。由于表单项分布在数据的各个层级里，因此，如何回填表单值就成了一个比较棘手的问题，处理不好，很容易引发一些逻辑bug（例如表单重置后，数据回填异常等）
antd表单 Form.Item,Form.List 的自定义数据格式
Realizee的博客
10-23 4927
1. 常用格式 { } 表单内容： <Form> <FormItem name={'name'} lable={'用户'} > <Input placeholder='请输入'/> </FormItem> <FormItem name={'ip'} lable={'IP地址'} > <In.........
Antd中使用Form.List且有Select组件，过滤问题
最新发布
weixin_54607676的博客
04-15 337
直接过滤会将每一个Select中的options选项都过滤掉，无法正常展示选择的选项。使用onChange,对选择的内容重新赋值，触发options的过滤函数。
Antd的Form.List使用
热门推荐
前端小白的逆袭
09-08 1万+
Antd的Form.List使用
antd 嵌套form.List
weixin_53911951的博客
07-05 276
【代码】antd 嵌套form.List。
[React] Antd Form.List 的基本使用
iChangebaobao的博客
05-07 4315
[React] Antd Form.List 的基本使用 Form.List 为字段提供数组化管理。 官网：https://ant.design/components/form-cn/#Form.List <Form.List name='infoList'> {(fields, {add, remove}) => ( <> <FormItem> {gettext('用户填写信息')} <Button
antd Table，Form
weixin_43924896的博客
09-10 1556
antd-table组件的经验
基于antd@5.x封装Form.List组件
hs1219462412的博客
07-20 732
【代码】基于antd@5.x封装Form.List组件。
antd vue form 手动校验_Ant Design 4.0 的一些杂事儿 - Form 篇
weixin_39805851的博客
11-20 1939
上一篇：Ant Design 4.0 的一些杂事儿 - Table 篇是的，趁着手热，于是又开了一篇新的文章，用来讲讲我们在开发 Ant Design 4.0 的 Form 时遇到的一些杂事儿。当然，欢迎使用、吐槽以及贡献到开源项目中来。Ant Design 4.0.0-rc 版本已经发布，我们提供了一套迁移指南和自动化迁移工具（从社区反馈上来看，我相信不少朋友们已经升级体验了~）。贤良淑德的 F...
React Antd Form：实现数据回显功能的表格与编辑表单操作
在本文档中，我们讨论的是如何在Ant Design（antd）框架下实现一个具有数据回显功能的表单组件。主要关注点是当用户点击"新增"按钮或编辑表格中的某一行时，如何在弹出的表单中显示与所选记录相对应的数据。以下是...
基于antd pro二次封装的组件库react-antd-super-form
szsk2021的博客
03-10 1632
基于antd pro二次封装的组件库react-antd-super-form 该组件库是我们对antd pro进行二次封装的一个偏业务层面的一个React ui组件库。 该组件库诞生的初衷？ 该组件库主要是为了提升中后台管理系统开发效率，将antd封装好的各个组件进行组合以达到页面高度配置化。 后台管理系统需求接触多了之后我们会发现各个模块间的区别其实并不大，无非就是表格、表单、弹窗这些组件里面嵌套各个粒度更小的组件。 所以我们就考虑一般组件封装都是将大的组件拆分成粒度更小的组件，那为什么
antd+ ts 的表单动态添加form.List的使用
weixin_39917260的博客
10-24 3003
antd4.x + ts 的表单动态添加form.List的使用
基于antd+form.list简单实现可编辑表格（js文件）
m0_56503111的博客
03-16 812
render里面的每一行的数据不再是 field，而是form.getFieldValue(name)[index]，需要传入form实例和name，可以多个表格不影响，拿到的数据类型为{name:[]}。可以根据 传入的类型渲染不同的input编辑框。
React Antd Form.List 组件嵌套多级动态增减表单 + 表单联动复制实现
Constantiny的博客
07-02 5161
目前想到是用浏览器本地存储存下每次的 storeId 值，仅在有值的才写进去，每次读取 storeId 时候先判断 props 传过来的是否是空值，是空值就从 storage 里面取。问题一：复制的时候由于存在表单联动，直接获取 form 对应字段的值虽然能附上值但是复制出来的下拉框没值 ，因为 useMemo 发生变化。复制时传给子组件的 id 为 先为有效值后不存在，所以缓存的下拉框选项值变为空。有一个页面的组件，其中一部分需要用到。综合以上需求，大致的页面样子。
react 入坑学习（三）ANTD Form 读取其中Table数据
JeffanChen的博客
07-13 2055
ANTD Form 读取其中Table数据 首先将table中的数据保存起来，我这里使用了selectRoleRow来保存。 form.item 里的name 可以先不定义 let selectRoleRow=[]; rowSelection={{ onChange: (selectedRowKeys, selectedRows) => { selectRoleRow=selectedRows; }, }} 然后是我们的
antd Form.list嵌套Form.list
zxz_learn的博客
08-24 6617
import { Form, Input, Button, Space, Select } from 'antd'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; const { Option } = Select; const areas = [ { label: 'Beijing', value: 'Beijing' }, { label: 'Shanghai', value: 'Shanghai
antd的Form实例控制表格，表格可收集/回显数据
qq_52845451的博客
03-09 1144
antd的Form组件控制表格，表格可收集/回显数据
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值