一次只展开 table 行 Ant Design React

Question

我无法实现，我附上了下面的代码请告诉我这里有什么问题？

在添加 expandedRowKeys 和 onExpand 之前，它扩展了所有表格行，但在实施之后，它甚至没有打开一行

<Table
    rowkey="id"
    size="small"
    columns={groupsPackageColumns}
    dataSource={roomPackages}
    className="taglist-table"
    expandable={{
        expandedRowRender: (record) => (
            <Table
                rowKey="id"
                columns={nestedTagsColumn}
                dataSource={record.tags}
                className="ant-table-container"
            />
        ),                    
        expandedRowKeys: activeExpRow,
        onExpand: (expanded, record) => {
            const keys = [];
            if (expanded) {
               keys.push(record.id); 
            }
            setActiveExpRow(keys);
        },
    }}
                        
/>

Answer 1

我不确定你的 roomPackages 的数据结构。但它应该包含 key 属性。并推送 record.key 而不是 record.id 如果 dataSource 数据不包含 key 属性，您将收到以下错误。

因此，我们需要修改数据，因为它包含 key 属性。我制作了可用的 Codesandbox。

https://codesandbox.io/s/expandable-row-antd-4-17-4-forked-41rd3?file=/index.js

一次只展开 table 行 Ant Design React

Expand only one table row at a time Ant Design React

html

javascript

css

reactjs

antd