使用antd组件库，如何创建可动态增删行的table，并且带有校验规则，可以获取表单的数据

Question

如图，我想实现的功能有：
1、表格是树形结构；
2、可以动态增加兄弟节点和父节点；
3、每个单元格都可以带有规则；
4、可以校验表单，验证通过后可以提交到后台；

import { Button, Checkbox, Input, Table, Tooltip, Form } from "antd";
import React, { ReactElement } from "react";
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
import "./Index.less";
import { FormInstance } from "antd/lib/form";

class Response extends React.PureComponent<any, any> {
    formRef = React.createRef<FormInstance>();
    constructor(props: any) {
        super(props);
        this.state = {
            dataSource: [
                {
                    key: 2,
                    name: "Joe Black",
                    age: 32,
                    checked: false,
                    address: "Sidney No. 1 Lake Park",
                }
            ]
        };
    }

    componentDidMount() {
        const { data } = this.props;
        this.setState({
            dataSource: data
        });
    }
    // 添加兄弟节点
    addSibingNode = () => {
        console.log("addSibingNode");
        this.setState({
            dataSource: [
                ...this.state.dataSource,
                {
                    key: new Date().getTime(),
                    name: "",
                    age: null,
                    checked: false,
                    address: "",
                }
            ]
        }, () => {
            console.log(this.state.dataSource);
        });
    }

    // 添加子节点
    addChildNode = (data: any) => {
        console.log("addChildNode", data);
    }

    handleSave = () => {
        this.formRef.current!
            .validateFields()
            .then((fieldsValue: any) => {
                console.log("fieldsValue", fieldsValue);
            })
            .catch((info: any) => {
                console.log("info", info);
            })
    }

    render(): ReactElement {
        const columns = [
            {
                title: () => {
                    return (<span className={"required"}>参数1</span>);
                },
                dataIndex: "name",
                key: "name",
                width: "300px",
                render: (age: number) => {
                    return <Input defaultValue={age} className={"field-name"}></Input>;
                }
            },
            {
                title: () => {
                    return (<span className={"required"}>参数2</span>);
                },
                dataIndex: "age",
                key: "age",
                width: "12%",
                render: (age: number) => {
                    return <Input defaultValue={age}></Input>;
                }
            },
            {
                title: () => {
                    return (<span className={"required"}>参数3</span>);
                },
                dataIndex: "name",
                key: "name",
                render: (age: number) => {
                    return <Input defaultValue={age}></Input>;
                }
            },
            {
                title: () => {
                    return (<span className={"required"}>参数4</span>);
                },
                dataIndex: "name",
                key: "name",
                render: (age: number) => {
                    return <Input defaultValue={age}></Input>;
                }
            },
            {
                title: () => {
                    return (<span className={"required"}>参数5</span>);
                },
                dataIndex: "checked",
                key: "checked",
                render: (checked: boolean) => {
                    return <Checkbox defaultChecked={checked}></Checkbox>;
                }
            },
            {
                title: () => {
                    return (<span className={"required"}>参数5</span>);
                },
                dataIndex: "name",
                key: "name",
                render: (age: number) => {
                    return <Input defaultValue={age}></Input>;
                }
            },
            {
                title: () => {
                    return (<span className={"required"}>参数7</span>);
                },
                dataIndex: "name",
                key: "name",
                render: (age: number) => {
                    return <Input defaultValue={age}></Input>;
                }
            },
            {
                title: "操作",
                width: "100px",
                key: "address",
                render: (data: any) => {
                    return (
                        <>
                            <Tooltip title="添加啥子节点？？？">
                                <PlusOutlined className={"operate-item"} onClick={() => this.addChildNode(data)}/>
                            </Tooltip>
                            <DeleteOutlined className={"operate-item delete-icon"}/>
                        </>
                    );
                }
            },
        ];
        return (
            <>
                <Button type="primary" onClick={this.addSibingNode}>新增参数</Button>
                <Button type="primary" onClick={this.handleSave}>获取Form</Button>
                <Form ref={this.formRef}>
                    <Form.Item>
                        <Table
                            pagination={false}
                            columns={columns}
                            dataSource={this.state.dataSource}
                        />
                    </Form.Item>
                </Form>
            </>
        );
    }
}

export default Response;

我实现了部分功能，表单校验和获取表单数据提交给后台，这两个功能没有思路，请问如何实现？（不使用hook）