{{format('0')}} {{format('552')}} {{format('1444')}}

Vue2.0 + ElementUI <el-table>中显示图片并且可以点击预览 [ 技术杂谈 ]

九叶的小窝 文章 正文

As Long As You Love Me.
分享

九叶

{{nature("2021-05-28 12:33:57")}}更新

1. 如何在elementUI的表格中实现图片的显示预览

效果如下图所示:

image.png

要想实现这个效果,我们可以使用elementUI中的标签来操作,它包含有两个标签,第一个是悬浮放大的图片定义,第二个是表格中显示的缩略图定义。

里面的trigger属性用于设置何时触发 Popover,支持四种触发方式:

hover 鼠标移入,click 鼠标点击,focus 鼠标按住 ,manual 手动开关

参数 说明 类型 可选值 默认值
trigger 触发方式 String click/focus/hover/manual click

对于触发 Popover 的元素,有两种写法:

使用 slot="reference" 的具名插槽,或使用自定义指令v-popover指向 Popover 的索引ref。

详细说明可以访问elementUI官网进行查看

具体的实现代码如下:

<el-table-column label="图片" align="center" width="150px">
  <template slot-scope="scope">
    <el-popover
      placement="right"
      trigger="click">
      <im g style="width: auto;height: 500px" :src="imgUrl + scope.row.photos" />
      <div style="padding:2px;border:2px solid #cceff5;background:#fafcfd; border-radius: 7px;" v-if="scope.row.photos !==null" slot="reference">
        <el-image style="max-height: 100px; vertical-align: middle; border-radius: 7px;" fit="cover" :src="imgUrl + scope.row.photos">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
    </el-popover>
  </template>
</el-table-column>
评论 0
0
{{userInfo.data?.nickname}}
{{userInfo.data?.email}}
TOP 2
Minecraft | [1.12.2] 核电工艺模拟器 1.2.25 —— 汉化版

{{nature('2021-12-07 15:29:00')}} {{format('2500')}}人已阅读

TOP 3
SSM搭建Spring单元测试环境

{{nature('2021-01-31 20:01:00')}} {{format('1065')}}人已阅读

TOP 4
dispatcher-servlet.xml文件配置模板

{{nature('2020-12-11 21:17:00')}} {{format('980')}}人已阅读

TOP 5
Windows平台Nacos启动报错无法创建Bean实例

{{nature('2021-04-22 15:16:00')}} {{format('957')}}人已阅读

目录

标签云

Vue ElementUI

一言

# {{hitokoto.data.from || '来自'}} #
{{hitokoto.data.hitokoto || '内容'}}
作者:{{hitokoto.data.from_who || '作者'}}
自定义UI
配色方案

侧边栏