首页antd表格树结构数据展示

antd表格树结构数据展示

时间: 2025-07-02 08:51:16 浏览: 12

### 实现 Ant Design 表格组件中的树结构数据展示为了在 `Ant Design` 的表格组件 (`Table`) 中显示树状结构的数据，可以利用 `Tree Data` 属性来配置。这允许每一行不仅代表一条记录还可以作为父节点拥有子节点。通过设置 `rowKey` 来唯一标识每条记录，并且当存在父子关系时，确保子项的 `parentId` 对应到其上级项目的键值。下面是一个简单的例子说明如何定义这样的表单以及渲染层次化的信息[^1]: ```jsx import React from 'react'; import { Table } from 'antd'; const data = [ { key: '1', name: 'Parent 1', age: 20, address: 'some street 1', children: [ { key: '2', name: 'Child 1-1', age: 24, address: 'some street 1-1' }, { key: '3', name: 'Child 1-2', age: 27, address: 'some street 1-2' } ] }, ]; class TreeDataTable extends React.Component { render() { const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]; return ( <Table columns={columns} dataSource={data} pagination={false} rowKey="key" expandable={{ expandedRowRender: record => <p style={{ margin: 0 }}>{record.description}</p>, rowExpandable: record => !!record.children }} /> ); } } export default TreeDataTable; ``` 上述代码片段展示了创建一个具有嵌套子项能力的表格的方式。这里的关键在于给定的数据源包含了带有 `children` 字段的对象，这些对象本身也可以是数组形式从而支持多级嵌套。同时，在构建表格实例时启用了 `expandable` 配置选项以便能够折叠/展开各层项目。

阅读全文