react+andtui框架实现获取table表格中节点数据

以下功能使用了table嵌套tree树形控件实现数据展示

子组件代码
const [selectedNodes, setSelectedNodes] = useState([]);
const [dataSource, setDataSource] = useState([])
dataSource数据格式:
0: 
attributes: "DescAttributes"
en_name: "EnglishName"
fields: "PushDesc"
length: "1000"
name: "描述"
table_name: "PushLTable"
type: "nvarchar"
zh_name: "Chinese" 
1: 
attributes: "DescAttributes"
en_name: "EnglishName"
fields: "PushDesc"
length: "1000"
name: "描述"
table_name: "PushLine"
type: "nvarchar"
zh_name: "Chinese" 


点击勾选选中节点数据
const onCheck = (checkedKeys, info) => {
        
        const nodes = info.checkedNodes.reduce((allTitles, node) => {

          // 忽略没有 title 属性的节点
          if (!node.title) {
            return allTitles;
          }
          debugger
          allTitles.push(
            
           node.title
            
            );
          return allTitles;
        }, []);
        
        setSelectedNodes(nodes);
        console.log('选中的节点2信息:', nodes);
      };

勾选后点击提交把数据传递给父组件
 const onFinish = (values) => {
        debugger
        const dataToSubmit = dataSource.map((record) => ({
          ...values,
          table_name: record.table_name,
          attributes: record.attributes,
          en_name: record.en_name,
          zh_name: record.zh_name,
          fields: record.fields,
          length: record.length,
          name: record.name,
          type: record.type,
        }));
      
        onSave(dataToSubmit, selectedCollection);
        console.log('提交选中的节点信息:', dataToSubmit);
        setOpen(false);
      };

      const onExpandedRowsChange = (keys) => {
        setExpandedRowKeys(keys);
      };


   <Form
           form={form}
           onFinish={onFinish}
           initialValues={{ tableData: dataSource }} // 设置初始值为表格数据
           >
      <Table
            columns={columns}
            dataSource={dataSource}
            rowSelection={{
              selectedRowKeys,
              onChange: setSelectedRowKeys,
            }}
            pagination={false}
            expandable={{
              expandedRowRender: (record) => (
                <Tree
                  showLine
                  checkable
                  onCheck={onCheck}
                  expandedKeys={expandedRowKeys}
                  onExpand={onExpandedRowsChange}
                
                  >
                  {getTreeData([record]).map((treeRecord) => (
                    <Tree.TreeNode title={treeRecord.title} key={treeRecord.key}>
                      {(treeRecord.children || []).map((node) => {
                        if (!node.children || node.children.length === 0) {
                          return <Tree.TreeNode {...node} />;
                        }

                        return (
                          <Tree.TreeNode {...node}>
                            {node.children.map((childNode) => {
                              if (!childNode.children || childNode.children.length === 0) {
                                return <Tree.TreeNode {...childNode} />;
                              }

                              return (
                                <Tree.TreeNode {...childNode} key={childNode.key}>
                                  {childNode.children.map((grandChildNode) => (
                                    <Tree.TreeNode {...grandChildNode} />
                                  ))}
                                </Tree.TreeNode>
                              );
                            })}
                          </Tree.TreeNode>
                        );
                      })}
                    </Tree.TreeNode>
                  ))}
                </Tree>
              ),
            }}
        />

           <Form.Item wrapperCol={{ offset: 11, span: 16 }} >
          <Button type="primary" htmlType="submit"  >
            Submit
          </Button>
         </Form.Item> 
           </Form>

选中节点数据img

提交勾选中数据img

我想要在提交的时候获取到我勾选中树形节点数据,而不是整个table中所有的数据,
思路:问题出来这个onFinish 方法,需要调整一下,也可以调整onCheck方法把这里面的数据封装 onFinish 提交的数据格式,再直接遍历这个selectedNodes即可。

根据您的描述，如果您想在提交时获取勾选的树形节点数据，可以通过调整onFinish方法或者重新封装onCheck方法来实现。

一种方法是在onFinish方法中，将所需的树形节点数据与表格数据一起封装成提交的数据格式。您可以使用map方法遍历表格数据，并结合勾选的树形节点数据进行封装。

另一种方法是直接在onCheck方法中封装数据，并将勾选的节点数据存储到selectedNodes状态中。然后，在onFinish方法中，直接使用selectedNodes作为要提交的节点数据即可。

以下是第二种方法的示例代码：

const [selectedNodes, setSelectedNodes] = useState([]); // 存储勾选的节点数据

// 点击勾选选中节点数据
const onCheck = (checkedKeys, info) => {
  const nodes = info.checkedNodes.reduce((allTitles, node) => {
    if (!node.title) {
      return allTitles;
    }
    allTitles.push(node.title);
    return allTitles;
  }, []);
  
  setSelectedNodes(nodes);
  console.log('选中的节点信息:', nodes);
};

// 提交表单
const onFinish = () => {
  // 直接使用 selectedNodes 作为要提交的节点数据
  console.log('提交选中的节点数据:', selectedNodes);
};

请根据您的具体需求选择适合您的方式进行调整。