ant Table 表格支持树形数据的展示

表格支持树形数据的展示，当数据中有 children 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 childrenColumnName 进行配置。

const dataSource =  [
                {
                    "id": 51368,
                    "name": "name1",
                    "children": null,
                    "childCount": null,
                    "parentId": null,
                },
                {
                    "id": 51367,
                    "name": "name2",
                    "children": [
                        {
                            "id": 51366,
                            "name": "children name1",
                            "children": null,
                            "childCount": null,
                            "parentId": 51367,
                        },
                    ],
                    "childCount": 1,
                    "parentId": null,
                },

                {
                    "id": 51365,
                    "name": "name3",
                    "children": null,
                    "childCount": null,
                    "parentId": null,
                },
                {
                    "id": 51356,
                    "name": "name4",
                    "children": [
                        {
                            "id": 51358,
                            "name": "children name1",
                            "children": [
                                {
                                    "id": 51355,
                                    "name": "children children name1",
                                    "children": null,
                                    "childCount": null,
                                    "parentId": 51358,
                                },
                            ],
                            "childCount": 1,
                            "parentId": 51356,
                        },
                    ],
                    "childCount": 1,
                    "parentId": null,
                },
                {
                    "id": 51354,
                    "name": "name7",
                    "children": null,
                    "childCount": null,
                    "parentId": null,
                },
                {
                    "id": 51353,
                    "name": "name 5",
                    "children": null,
                    "childCount": null,
                    "parentId": null,
                },
                {
                    "id": 51352,
                    "name": "name 6",
                    "children": null,
                    "childCount": null,
                    "parentId": null,
                }
            ]

<Table
                    rowKey={(record) => record.id}
                    columns={Column}
                    dataSource={dataSource}
                    childrenColumnName="children" // 指定子项的字段名
                    expandable={{
                        expandIcon: ({ expanded, onExpand, record }) =>
                            record?.children?.length > 0 ?
                                expanded ? (
                                    <CaretDownOutlined
                                        style={{
                                            marginRight: '5px'
                                        }}
                                        onClick={e => onExpand(record, e)} />
                                ) : (
                                    <CaretRightOutlined
                                        style={{
                                            marginRight: '5px'
                                        }}
                                        onClick={e => onExpand(record, e)} />
                                ) : null
                    }}
                    indentSize={30} //展开间距
                />

子级缩进

可以通过设置 indentSize 以控制每一层的缩进宽度

页面展示

子级合上展示

子级展开展示