a543462378
2021-12-20 16:51
采纳率: 93.6%
浏览 26

react中让表格中图片单击放大预览

项目中详情页有一个表格,表格中图片要求可以单击放大预览,图片如下

img

img


项目中代码如下

                        <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>

页面控制台打印如下

img


怎么实现这个功能?

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

相关推荐 更多相似问题