element 表格内显示图片
先看下效果图,如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c8ebb2234f196e97caf115d64e489c18.png)
再看下前端代码:
<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);