使用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://cdkjz.cn/article/dpohgc.html

            返回首页
            了解更多建站资讯
        

    
相关资讯
    

        

            

                    
                        
python中正则表达式的分组和字符串匹配-创新互联
                    
                

                    
                        
reno2z怎么样RefNo是什么意思？-创新互联
                    
                

                    
                        
在laravel中使用Symfony的Crawler组件分析HTML-创新互联
                    
                

                    
                        
C#委托及事件-创新互联
                    
                

                    
                        
不得不看之JavaScript构造函数及new运算符-创新互联
                    
                

                    
                        
mysql中转换函数以及排序问题的示例分析-创新互联
                    
                

                    
                        
JavaScript实现左右滚动电影画布-创新互联
                    
                

                    
                        
php怎么用正则表达式匹配中文-创新互联
                    
                
        
    

    

        

            

                多年建站经验
            
            

                
多一份参考，总有益处
                
 联系快上网，免费获得专属《策划方案》及报价
                

                    
咨询相关问题或预约面谈，可以通过以下方式与我们联系
                    
 大客户专线   成都：13518219792
                          座机：028-86922220
                    
                
            
        
        

            在线咨询
            提交需求
        
    

    

        

            

                友情链接
                交换友情链接
            
            

                

                    南充网站制作重庆小程序开发公司成都电信服务器托管成都手机网站报价旅游网站建设方案成都网站设计网络推广公司西部信息机房成都网站建设成都网站排名                
            
        
    
    

        

            
成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
            

                成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
            
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图