一次只展开一个表格行 Ant Design React

Posted 2023-02-22

【中文标题】一次只展开一个表格行 Ant Design React

【英文标题】：Expand only one table row at a time Ant Design React

【发布时间】：2022-01-23 20:09:38

【问题描述】：

我无法做到这一点，我附上了下面的代码，请让我知道这里有什么问题？

在添加 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);
        ,
    
                        
/>

【参考方案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

【讨论】：

我的对象中有 id 而不是密钥

我更新了我的沙盒和描述。