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

最新推荐文章于 2024-03-29 19:44:48 发布

原创最新推荐文章于 2024-03-29 19:44:48 发布 · 5.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

elementUI 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了复杂的JSON数据结构解析方法，并详细介绍了如何在Vue项目中使用table组件展示包含多层级数据的情况，特别是针对每个条目下有多张图片和多个文字字段的场景。

数据格式：

{
    "success": true,
    "msg": "ok",
    "data": {
        "count": 3429,
        "totalPages": 343,
        "data": [{
        	name:'张三',
        	sex:'男',
        	"wxinfo": [
                    {
                        "nickname": "微信名字",
                        "headimgurl": "http://xxx1.com
                    },
                    {
                        "nickname": "微信名字",
                        "headimgurl": "http://xxx2.com
                    }
                ],
        },
        {
        	//...
        }]
   }
}

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>

多个文字，用引号加分号隔开

<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>