Ant Design 表格 展示 图片
时间: 2023-12-04 17:02:19 浏览: 28
Ant Design 表格支持在单元格中展示图片,可以通过 `render` 属性来实现。
首先需要在表格列的 `render` 属性中定义一个函数,这个函数的返回值就是要展示的图片元素。可以使用 `img` 标签来展示图片,例如:
```jsx
{
title: 'Avatar',
dataIndex: 'avatar',
key: 'avatar',
render: (avatarUrl) => <img src={avatarUrl} alt="avatar" style={{ width: 50 }} />,
},
```
在这个例子中,`avatarUrl` 是一个字符串类型的数据,表示图片的地址。在 `render` 函数中,使用 `img` 标签来展示这个图片,设置 `src` 属性为 `avatarUrl`,并设置 `alt` 属性为图片的描述,最后设置 `style` 属性来调整图片的宽度。
完整的代码示例:
```jsx
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Avatar',
dataIndex: 'avatar',
key: 'avatar',
render: (avatarUrl) => <img src={avatarUrl} alt="avatar" style={{ width: 50 }} />,
},
];
const Demo = () => {
return <Table dataSource={dataSource} columns={columns} />;
};
export default Demo;
```
运行效果如下:
![Ant Design 表格展示图片示例](https://i.imgur.com/l3BByYk.png)