ant design表格插入图片 代码示例
时间: 2023-10-12 08:06:02 浏览: 39
Ant Design 的表格组件可以通过自定义渲染单元格来实现插入图片。以下是一个示例代码:
```jsx
import { Table } from 'antd';
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '头像',
dataIndex: 'avatar',
key: 'avatar',
render: (text, record) => (
<img src={record.avatar} alt="avatar" style={{ width: '50px', height: '50px' }} />
),
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
];
const data = [
{
key: '1',
name: '张三',
avatar: 'https://example.com/avatar1.jpg',
age: 18,
},
{
key: '2',
name: '李四',
avatar: 'https://example.com/avatar2.jpg',
age: 20,
},
];
ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
```
在上面的示例中,我们在表格的第二列中插入了一张图片。我们使用 `render` 属性来自定义这一单元格的渲染方式,将单元格的内容渲染为一个 `img` 元素。在 `render` 函数中,我们可以访问当前单元格的数据,通过 `record.avatar` 来获取图片的 URL。在这个示例中,我们假设数据源中包含一个 `avatar` 字段,它的值是图片的 URL。