react ProTable树默认只展示第一层和第二层

要在 Ant Design Pro 中的 ProTable 组件中默认展开第一层和第二层，您可以使用 expandable 的 defaultExpandAllRows 选项结合 expandedRowKeys 来实现。以下是一个示例代

码，演示如何在 Ant Design Pro 中的 ProTable 组件中默认展示第一层和第二层：

import { ProTable } from '@ant-design/pro-table';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: '30%',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: '20%',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    width: '50%',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: '11',
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park',
      },
      {
        key: '12',
        name: 'John Brown jr.',
        age: 30,
        address: 'New York No. 3 Lake Park',
      },
      // ... 其他数据
    ],
  }
];

export default () => (
  <ProTable
    dataSource={data}
    columns={columns}
    rowKey="key"
    expandable={{ defaultExpandAllRows: false }} // 默认只展示第一层和第二层
    expandedRowKeys={['1', '11']} // 默认展开第一层和第二层
  />
);

　　在上面的示例代码中，我们使用了 expandedRowKeys 属性来指定默认展开的行，从而实现默认展示第一层和第二层的效果。

需要注意的是，expandedRowKeys 接受一个字符串数组，其中包含要默认展开的行的 key。根据具体需求和数据结构进行调整，确保数据能正确渲染和展示。Ant Design Pro 提供了

丰富的 API 和配置选项，可以根据需求进行灵活的定制和扩展。

 

转自：ChartGpt