element-ui如何在表格中插入图片

最新推荐文章于 2025-04-11 14:19:01 发布

原创最新推荐文章于 2025-04-11 14:19:01 发布

· 1.1k 阅读

2 ·

版权

文章标签：

#前端 #elementui

vue+elementui 专栏收录该内容

18 篇文章

订阅专栏

文章展示了在Vue项目中使用ElementUI的表格组件（el-table-column）来显示图片的两种方法。第一种利用el-popover实现悬停预览，第二种使用el-image组件自带的预览功能，并支持错误图标的自定义。此外，还演示了如何通过v-for遍历显示多张图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种

<el-table-column  label="精品图片">
	<template slot-scope="scope">
  	<el-popover placement="top-start" title="" trigger="hover">
    	<img :src="scope.row.product.cover" alt="" style="width: 150px;height: 150px">
      <img slot="reference" :src="scope.row.product.cover" style="width: 30px;height: 30px">
    </el-popover>
  </template>
</el-table-column>

第二种

<el-table-column  label="精品图片">
	<template slot-scope="scope">
  	<el-image style="width: 30px; height: 30px" :src="scope.row.product.cover" :preview-src-list="[scope.row.product.cover]">
    	<div slot="error" class="image-slot">
      	<i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
  </template>
</el-table-column>

插入多张

<el-table-column  label="面料图片">
	<template slot-scope="scope">
  	<el-image v-for="(item, index) in scope.row.image_info" :key='index' style="width: 30px; height: 30px" :src="item.image" :preview-src-list="[item.image]"></el-image>
  </template>
</el-table-column>