从品牌网站建设到网络营销策划,从策略到执行的一站式服务
本篇文章为大家展示了使用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 (); } }, ] // 点击放大图片预览 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 表格滚动); })}{ InitImageViwer(); // 点击放大图片 }} />
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图