使用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实现在表格中渲染一张或多张图片-创新互联
网站URL:http://scyanting.com/article/dpohgc.html