vue+elementui实现el-table中显示图片

最新推荐文章于 2025-09-12 17:54:57 发布

原创最新推荐文章于 2025-09-12 17:54:57 发布 · 1.1w 阅读

34 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Element 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何使用Element UI在table表中显示图片，包括单张图片和多张图片的展示方法，通过简单的代码示例展示了具体的实现过程。

使用Element实现在table表中显示图片：

1、一张图片

<el-table-column label="头像">
　　<template slot-scope="scope">
　　　　<img :src="scope.row.img" width="40" height="40" class="head_pic"/>
　　</template>
</el-table-column>

效果如下：
在这里插入图片描述

2、多张图片

<el-table-column prop="pictures" label="描述图片">
　　<template scope="scope">
　　　　<img v-for="item in scope.row.pictures" :src="item" width="40" height="40" class="head_pic"/>
　　</template>
</el-table-column>