element-ui点击查看大图的方法示例
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了element-ui查看大图的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
element-ui图片(查看大图),可通过 previewSrcList
开启预览大图的功能。
写在element-ui表格中,使用作用域插槽循环图片
<!-- template插槽 --> <template slot-scope="scope"> <div class="demo-image__preview"> <el-image style="width: 100%; height: 100%" :src="scope.row.pic" :preview-src-list="srcList" > </el-image> </div> </template>
1.此处的div
是展示大图的容器,当点击图象时显示出来。
2.srcList
是存放大图路径的数组,在获取数据时,通过forEach
将图片路径存放到srcList中
data() { return { data: [], // 所有数据 srcList: [], //大图 }, mounted(){ this.$http.get("/data.json").then((res) => { this.data = res.data; this.data.forEach((item) => { this.srcList.push(item.pic); }); }); }
最终效果:
到此这篇关于element-ui查看大图的方法示例的文章就介绍到这了,更多相关element查看大图内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!
上一篇:vue的hash值原理也是table切换实例代码
下一篇:小程序中手机号识别的示例