Element-ui中的el-image的图片预览功能(:preview-src-list)
2021-05-20 15:24
2326 查看
- 今天用了element-ui中的图片预览功能,但是它的图片预览功能只能预览事先定义的图片,与我的业务功能完全不符,我的业务功能是当点击图片时,就预览当前点击的图片。
- 所以我将其修改了一下,功能就是当点击一行表格中的一个图片时,这个图片就被预览了,代码很简单,就是直接复制element-ui中的图片预览组件就行
<el-table-column label="员工照片" align="center"> <template slot-scope="scope"> <el-image style="width: 100px; height: 100px" :src="scope.row.staffIcon" :preview-src-list="srcList" @click="vbs(scope.row.staffIcon)" > </el-image> </template> </el-table-column>
- 上面的这段代码与element-ui中的没有区别,唯一的区别就是我设置了一个点击事件click。
- 在下面的js中,定义srcList变量。(里面的图片路径可以写,也可以不写,都一样的效果,因为下面会清空)
srcList: [ "https://elevator4s-oss.oss-cn-hangzhou.aliyuncs.com/2021/05/07/b632db6a837f46e0950670277fa9e5e5multipartFile.png" ],
- 在下面js方法中,给srcList变量做添加,因为其为Array,所以添加时应该用push(这是一个方法,写在methods里面,这样写的思路是每次点击图片预览的时候,都将当前srcList清空,再将 22396 当前点击的照片的路径给他加上。如果不清空,就会存进去好多图片,直到页面再次刷新)
vbs(val) { this.srcList = [] this.srcList.push(val) }
- 下面是实现效果。
(1)这里可以看到我点击的“贾玲”这行,出现的是贾玲的图片(点击的那行是深颜色的)
(2)这里可以看到当我点击“王俊凯”这行,出现的是王俊凯的照片
相关文章推荐
- elementUI previewSrcList 调用图片展示组件
- 详解elementui之el-image-viewer(图片查看器)
- previewImage.js实现类似微信朋友圈图片预览功能
- android困惑之UI---imageView实现对图片的选取,和裁剪功能。。。。
- IE7 预览待上传的本地图片(Image Upload Preview) ,放上服务器浏览就不行了。什么破IE7,这个都不支持了
- mui.previewimage实现图片预览效果并且图片可左右滑动
- vue+elementUI实现图片上传功能
- jquery input file show image preview 预览图片
- #713 – 在拖拽操作中使用控件预览图作为鼠标(Setting the Cursor to an Image of an UIElement While Dragging)
- 微信小程序图片预览wx.previewImage
- ImagePreviewd.js 选择图片预览遇到的问题
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- elementUI el-select中el-option中插入图片
- 分离与继承的思想实现图片上传后的预览功能:ImageUploadView
- vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
- VUE 使用 element-ui 的 el-autocomplete 组件实现输入框自动提示查询功能 超简单!!!
- 【Android 开发】:UI控件之 ImageView 实现适屏和裁剪图片的功能
- Vue+ElementUI使用vue-pdf实现预览功能
- elementui el-table 表格列做了处理,导出表格功能
- vue2.0 使用element-ui里的upload组件实现图片预览效果