Vue2.0 + ElementUI <el-table>中显示图片并且可以点击预览

JiuyeXD

May 6, 2021

549 views

No comments

798 words

技术杂谈

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

效果如下图所示：

![image.png](https://old.qwq.ro/usr/uploads/2021/05/1712066799.png)

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

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

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

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

对于触发 Popover 的元素，有两种写法：

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

[详细说明可以访问elementUI官网进行查看](https://element.eleme.cn/#/zh-CN/component/popover#slot)

具体的实现代码如下：

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

Last modification：May 28, 2021