antd table中 column中字段是list数组
时间: 2023-11-27 13:55:39 浏览: 72
在antd Table中插入可编辑的单元格实例
如果antd table中column中的字段是一个list数组,你可以使用render函数来将其展示出来。在render函数中,你可以使用map方法对数组进行遍历,然后将每个元素展示出来。
例如:
```jsx
const dataSource = [
{
key: '1',
name: 'John Brown',
hobbies: ['reading', 'swimming', 'hiking'],
},
{
key: '2',
name: 'Jim Green',
hobbies: ['cooking', 'running', 'dancing'],
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Hobbies',
dataIndex: 'hobbies',
key: 'hobbies',
render: hobbies => (
<>
{hobbies.map(hobby => (
<Tag key={hobby}>{hobby}</Tag>
))}
</>
),
},
];
<Table dataSource={dataSource} columns={columns} />;
```
以上代码中,我们将数据源dataSource中的每一项都包含了一个名为"hobbies"的数组。在columns中,我们使用了render函数来将"hobbies"数组中的每个元素展示成一个标签(Tag)。通过这样的方式,我们就可以将一个list数组展示在antd table中了。
阅读全文