使用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)=> <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 }} />