项目中详情页有一个表格，表格中图片要求可以单击放大预览，图片如下
项目中代码如下
<Col span={24}>
<Table bordered dataSource={agreementCompanyList}
size='small' pagination={false}
>
<Table.Column title='协议单位名称' align='center' dataIndex='slacProtocolCfidCompany' />
<Table.Column title='协议到期时间' align='center' dataIndex='slacProtocolExpireTimeStr' />
<Table.Column title='协议扫描件' align='center' dataIndex='slacProtocolPic' render={text => {
if (typeof text === 'string') {
const res = text.split(';');
if (Array.isArray(res)) {
if (status === 'see') {
return res.map(imageList => {
return (
<ImageRender list={imageList} />
)
})
} else {
return `${res.length}张图片`
}
}
}
}} />
{
status === 'see' && (
<Table.Column title='二维码' align='center' render={(text, rec, index) => {
return (
<Space>
<Button type='link' danger onClick={() => { handleDownloadQRCode(row.slcaCfid + '/' + rec.slacProtocolCfid) }}>下载</Button>
</Space>
)
}}
/>
)
}
{status !== 'see' && (
<Table.Column title='操作' align='center' render={(text, row, index) => {
return (
<Space>
<Button type='link' danger onClick={() => { handleDeleteAgreementCompany(row) }}>删除</Button>
</Space>
)
}}
/>
)}
</Table>
</Col>
项目中封装的ImageRender代码如下
import React from 'react';
import { Image } from 'antd';
import { imageURL } from '@/api/ask'
export default ({ list }) => {
if (Array.isArray(list)) {
return list.map(item => <Image key={item} src={imageURL + item} style={{ width: 100, height: 100, marginRight: 8, marginBottom: 8 }} alt='暂无图片' />)
} else if (typeof list === 'string') {
return <img src={imageURL + list} style={{ width: 100, height: 100, marginRight: 8, marginBottom: 8 }} alt='暂无图片' />
} else {
return null;
}
}
我在项目中使用ImageRender成功的代码如下
<Form.Item label='结束转运照片'>
{status === 'see' ? (
<ImageRender list={typeof row.ptTransportEndPic === 'string' ? row.ptTransportEndPic.split(';') : null} />
) : (
<ImageUpload list={finishImageList} setList={setFinishImageList} />
)}
</Form.Item>
页面控制台打印如下
怎么实现这个功能？
