react+antd 实现表单动态增加Table可编辑行，且表单可验证

实现效果

封装可编辑表格组件

import { Table, Form, Space, Button } from 'antd';
const TableEditForm = (props) => {
  return (
    <Form.List name={props.code}>
      {(fields, { add, remove }) => {
        return (
          <div class="tableEditForm">
            <Table
              dataSource={fields}
              pagination={false}
              scroll={props.scroll}
              bordered={props?.bordered}
              columns={[
                ...props.columns,
                {
                  title: '操作',
                  dataIndex: 'action',
                  key: 'action',
                  fixed: 'right',
                  width: 200,
                  render: (text, record) => {
                    return (
                      !props?.disabled && (
                        <Space>
                          {fields.length == record.name + 1 && (
                            <Button type="primary" onClick={() => add()}>
                              新增
                            </Button>
                          )}
                          <Button
                            type="primary"
                            danger
                            disabled={fields.length == 1}
                            onClick={() => remove(record.name)}
                          >
                            删除
                          </Button>
                        </Space>
                      )
                    );
                  },
                },
              ]}
            />
          </div>
        );
      }}
    </Form.List>
  );
};

export default TableEditForm;

表单中使用

import {TableEditForm,} from '@/components'; //引用
const Edit = (props) => {
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => {
        return (
          // 可以直接像表单使用一样写组件，写校验
          <Form.Item
            name={[record.name, 'name']}
            fieldKey={[record.fieldKey, 'name']}
            rules={[
              {
                required: true,
                message: '名称不能为空',
              },
            ]}
          >
            <Input allowClear placeholder="名称" />
          </Form.Item>
        );
      },
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      render: (text, record) => {
        return (
          <Form.Item
            name={[record.name, 'address']}
            fieldKey={[record.fieldKey, 'address']}
            rules={[
              {
                required: true,
                message: '地址不能为空',
              },
            ]}
          >
            <Input allowClear placeholder="服务网点地址" />
          </Form.Item>
        );
      },
    },
    // .....
  ];
  return (
      <Form
        form={form}
        initialValues={{
          managementCode: [{}] //需要设置一个初始空值，表单才有初始编辑行
        }}
      >
         <TableEditForm
          scroll={{ x: 1400 }}
          code={['managementCode']}
          columns={columns} //设置列数据源
        />
      </Form>
  );
};

export default Edit;