element UI表格单元格展示多张图片

https://blog.csdn.net/gjsiaifa/article/details/90903370

 

数据格式：

{
"success": true,
"msg": "ok",
"data": {
"count": 3429,
"totalPages": 343,
"data": [{
name:'张三',
sex:'男',
"wxinfo": [
{
"nickname": "微信名字",
"headimgurl": "http://xxx1.com
},
{
"nickname": "微信名字",
"headimgurl": "http://xxx2.com
}
],
},
{
//...
}]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
table组件中，多个图片

<el-table-column prop="wxinfo" label="微信头像" width="100" :show-overflow-tooltip="true">
<template slot-scope="scope">
<img :src="item.headimgurl" v-for="(item,index) in scope.row.wxinfo" height="90%" class="touxiang"/>
</template>
</el-table-column>
1
2
3
4
5
多个文字，用引号加分号隔开

<el-table-column prop="wxinfo" label="微信昵称" width="100" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span v-for="(item,index) in scope.row.wxinfo">"{{item.nickname}}",</span>
</template>
</el-table-column>
————————————————
版权声明：本文为CSDN博主「yc99」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/gjsiaifa/article/details/90903370