在Antd Table中将多个数据显示到单个列/单元格中,可以使用render属性来自定义列的内容。具体步骤如下:
以下是一个示例代码:
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'John',
age: 32,
address: 'New York',
data1: 'Data 1',
data2: 'Data 2',
},
// 其他数据...
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Data',
key: 'data',
render: (record) => (
<div>
{record.data1}
<br />
{record.data2}
</div>
),
},
];
const ExampleTable = () => {
return <Table dataSource={dataSource} columns={columns} />;
};
export default ExampleTable;
在上述示例中,我们在columns配置中的"Data"列中使用了render属性来自定义内容。在render函数中,我们将record.data1和record.data2拼接成一个字符串,并使用<br />
标签来换行显示。最后,将构建好的内容用<div>
标签包裹起来返回。
这样,当Table渲染时,"Data"列中的单元格就会显示多个数据。你可以根据实际需求,自定义展示方式,例如使用其他组件、样式等。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云