Vue2.0 + ElementUI <el-table>中显示图片并且可以点击预览 [ 技术杂谈 ]
九叶的小窝 文章 正文
![As Long As You Love Me.](https://api.qwq.ro/storage/users/uid-1/1661304663.png)
九叶
{{nature("2021-05-28 12:33:57")}}更新1. 如何在elementUI的表格中实现图片的显示预览
效果如下图所示:
要想实现这个效果,我们可以使用elementUI中的标签,第一个是悬浮放大的图片定义,第二个是表格中显示的缩略图定义。
里面的trigger属性用于设置何时触发 Popover,支持四种触发方式:
hover 鼠标移入,click 鼠标点击,focus 鼠标按住 ,manual 手动开关
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
trigger | 触发方式 | String | click/focus/hover/manual | click |
对于触发 Popover 的元素,有两种写法:
使用 slot="reference" 的具名插槽,或使用自定义指令v-popover指向 Popover 的索引ref。
具体的实现代码如下:
<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>
{{nature('2021-12-07 15:29:00')}} {{format('2878')}}人已阅读
{{nature('2021-01-31 20:01:00')}} {{format('1231')}}人已阅读
{{nature('2020-12-11 21:17:00')}} {{format('1158')}}人已阅读
{{nature('2021-04-22 15:16:00')}} {{format('1112')}}人已阅读
目录
标签云
一言
评论 0
{{userInfo.data?.nickname}}
{{userInfo.data?.email}}