antd table 多行显示举例说明
时间: 2023-06-02 19:04:20 浏览: 100
好的,antd table 多行显示的示例代码如下:
```
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: '30%',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: '20%',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const Demo = () => {
return (
<Table dataSource={dataSource} columns={columns} pagination={{ pageSize: 2 }} />
);
};
ReactDOM.render(<Demo />, mountNode);
```
以上代码将antd table的 pagination 设置为 2,即每页显示 2 行数据,如果数据超过 2 行则会自动分页。
阅读全文