本篇文章为大家展示了使用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实现在表格中渲染一张或多张图片-创新互联                    

                    网页URL：http://chengdu.cdxwcx.cn/article/dpohgc.html

            
其他资讯
            

                

                    

                            
                                
帝国cms搜索设置 帝国cms如何使用
                            
                        

                            
                                
阿里云服务器+攻击 阿里服务器被攻击
                            
                        

                            
                                
如何提高服务器安全 如何提高服务器安全性的方法
                            
                        

                            
                                
冰雹猜想java代码 冰雹猜想举例
                            
                        

                            
                                
腾讯云服务器阶梯流量 腾讯云服务器流量包
                            
                        
                
            
        

    

        
QQ咨询
        

            
在线咨询
        
        
官方微信
            

        
        
联系电话
            

                
座机028-86922220
                
手机13518219792
            
        
        
返回顶部