在Antd表格中,可以使用render属性自定义单元格的内容,从而将多个数据显示在单个列/单元格中。以下是一个示例代码,演示了如何将多个数据显示在单个列/单元格中:
import React from 'react';
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'John',
age: 32,
address: ['New York', 'London', 'Sydney'],
},
{
key: '2',
name: 'Mike',
age: 42,
address: ['Tokyo', 'Paris', 'Berlin'],
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
render: (text) => (
{text.map((item) => (
- {item}
))}
),
},
];
const App = () => {
return
;
};
export default App;
在上面的示例中,我们定义了一个dataSource数组,其中每个对象都有一个address属性,它是一个包含多个地址的数组。在columns数组中,我们定义了一个名为"Address"的列,并使用render属性来自定义单元格的内容。在render函数中,我们使用map方法将地址数组中的每个地址都渲染为一个li元素,并将它们放入一个ul元素中。
当我们将dataSource和columns传递给Antd的Table组件时,表格中的每个单元格都会根据我们的自定义渲染函数进行渲染,从而将多个数据显示在单个列/单元格中。