element 表格内显示图片

element 表格内显示图片


先看下效果图,如下:
在这里插入图片描述
再看下前端代码:

  <el-table :data="gridData"  height="400" border>
                    <el-table-column
                            type="index"
                            :index="indexFn"
                            label="序号"
                            width="80"
                    ></el-table-column>
                    <el-table-column property="pointNumber" label="点位编号" width="150" ></el-table-column>
                    <el-table-column property="dwmc" label="点位名称" width="150"></el-table-column>
                    <el-table-column property="dwdz" label="点位地址" width="150"></el-table-column>
                    <el-table-column property="img" label="现场照片">
                         <template scope="scope">
                           <!-- <img v-for="item in scope.row.img"
                                 :src="item" width="100" height="100"
                                 style="margin-left:10px;" class="head_pic"/>-->
                        <div class="demo-image__preview">
                            <el-image  style="width: 100px; height: 100px; margin-left:10px;"
                                       v-for="item in scope.row.img"
                                       :src="item"
                                       :preview-src-list="scope.row.img"
                            ></el-image>
                        </div>
                          </template>
                    </el-table-column>
                </el-table>

后端代码(img是图片地址的集合):

  for(BusinessStatic businessStatic:fetch){
                Map<String,Object> map=new HashMap<>();
                map.put("pointNumber",businessStatic.getPointNumber());
                map.put("dwmc",businessStatic.getDwmc());
                map.put("dwdz",businessStatic.getDwdz());
                String imageGuid = businessStatic.getImageGuid();
                List<String> fetch1 = jpaQueryFactory.select(qUploadfiles.filePath).from(qUploadfiles).where(qUploadfiles.guid.eq(imageGuid)).fetch();
                map.put("img",fetch1);
                list.add(map);
            }
            return JsonHelper.toJson(list);
  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值