Vue+Element ui+ Springboot实现table预览图片实现------Vue+Element 常用功能汇总之系列之二

最新推荐文章于 2023-11-25 17:18:36 发布

ioseeker

最新推荐文章于 2023-11-25 17:18:36 发布

阅读量836

点赞数

CC 4.0 BY-SA版权

分类专栏： vue+element-ui 文章标签： vue.js css html

本文链接：https://blog.youkuaiyun.com/seeker_lqq/article/details/97133753

vue+element-ui 专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中通过Element UI的el-popover组件，实现在表格中鼠标悬停预览图片的功能。代码示例展示了如何设置图片的大小以及预览效果，包括原始图片和缩略图的展示。

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

情景：在想在列表中鼠标移到图片上，然后预览放大图片。

实现代码:

      <el-table-column prop="dataUrl" header-align="center" align="center" width="150px" label="图片">
        <template slot-scope="scope">
          <el-popover placement="right" title trigger="hover">
            <img :src="baseUrl+scope.row.dataUrl" style="height: 200px;width: 300px" align="center" />
            <img slot="reference" :src="baseUrl+scope.row.dataUrl"  style="max-height: 50px;max-width: 130px"
            />
          </el-popover>
        </template>
      </el-table-column>

ok 这次就到这里了^ - ^