记录一下。react antd table 渲染图片和预览
第一步安装: cnpm install viewerjs --save
第二步引入: import ImageViewer from "viewerjs"
import ‘viewerjs/dist/viewer.css‘;
第三步
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 }} />