温江做网站
新网创想网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
使用reactantd实现在表格中渲染一张或多张图片-创新互联
本篇文章为大家展示了使用react antd实现在表格中渲染一张或多张图片，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
使用antd table中显示一张图片，代码如下：
const columns = [ {
title: "姓名",
dataIndex: "name",
width: 100 , // table列定宽 可不设
fixed: "left" // 固定列的位置
},
{
title: "联系电话",
width: 150,
dataIndex: "phone"
},
{
title:"显示一张图片",
width:150，
dataIndex:"img"，
render：(text)=> 
},
{
title:"显示多张图片",
width:400，
dataIndex:"imgs"，
render: text => {
// text是后端传的多个url，需要逗号分隔再显示图片
if (text) {
return (
{text.split(",").map((items, index) => {
return (
{
InitImageViwer(); // 点击放大图片
}}
/>
);
})}
);
}
},
]
// 点击放大图片预览
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 表格滚动
网站名称：使用reactantd实现在表格中渲染一张或多张图片-创新互联
转载来于：http://wjwzjz.com/article/dpohgc.html