react antd表格中渲染一张或多张图片

记录一下。react antd table 渲染图片和预览

第一步安装： cnpm install viewerjs --save

第二步引入:  import ImageViewer from "viewerjs"

　　　　　　import 'viewerjs/dist/viewer.css';

第三步

const columns = [  {
    title: "姓名",
    dataIndex: "name",
     100 ,   // table列定宽  可不设
     fixed: "left"   // 固定列的位置
  },
  {
    title: "联系电话",
     150,
    dataIndex: "phone"
  },
  {
  title:"显示一张图片",
  150，
  dataIndex:"img"，
  render：(text)=> <img src={text}/>
  },
  {
  title:"显示多张图片",
  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={{
                     "100px",
                    height: "100px",
                    marginLeft: "4px",
                    overflow: "hidden"
                  }}
                >
                  <img
                    style={{  "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 }} />