ant.design5.0版本 表格组件横向纵向显示代码详细示例

Ant Design 5.0 版本的表格组件可以通过设置 `scroll` 属性来控制表格的横向和纵向滚动，从而实现横向纵向显示。以下是一个简单的示例代码：

import { Table } from 'antd';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `John Doe ${i}`,
    age: i + 1,
    address: `New York No. ${i + 1} Lake Park`,
  });
}

ReactDOM.render(
  <Table
    columns={columns}
    dataSource={data}
    scroll={{ x: 'max-content', y: 300 }}
  />,
  mountNode,
);

在上面的代码中，`scroll` 属性设置了横向滚动为 `max-content`，意为表格宽度自适应；纵向滚动为 `300`，意为表格高度最大为 `300`。

需要注意的是，为了让表格能够正常显示，表格的容器需要设置一个固定的高度或者最大高度。