使用antd table中显示一张图片,代码如下:
const columns = [ {
title: "姓名",
dataIndex: "name",
width: 100 , // table列定宽 可不设
fixed: "left" // 固定列的位置
},
{
title: "联系电话",
width: 150,
dataIndex: "phone"
},
{
title:"显示一张图片",
width:150,
dataIndex:"img",
render:(text)=> <img src={text}/>
},
{
title:"显示多张图片",
width:400,
dataIndex:"imgs",
render: text => {
// text是后端传的多个url,需要逗号分隔再显示图片
if (text) {
return (
<div style={{ display: "flex" }}>
{text.split(",").map((items, index) => {
return (
<div
key={index}
className="common-img-list"
style={{
width: "100px",
height: "100px",
marginLeft: "4px",
overflow: "hidden"
}}
>
<img
style={{ width: "100%" }}
src={items}
onClick={() => {
InitImageViwer(); // 点击放大图片
}}
/>
</div>
);
})}
</div>
);
}
},
]
// 点击放大图片预览
function InitImageViwer(
box = 'common-img-list', // 注意class不要忘记了
option = {},
callBack
) {
setTimeout(() => {
const viewList = []
const el = document.querySelectorAll(`.${box}`)
if (el.length) {
el.forEach((z, x) => {
viewList[x] = new ImageViewer(z, option)
})
callBack && callBack(viewList)
}
}, 1000)
}
// table 使用 scroll 表格滚动
<Table columns={columns} scroll={{ x: 1500, y: 500 }} />
实现效果图:
点击图片放大预览效果: