Tomcat 网络视频直播系统 微信商家收款 DHCP controller nosql signalr usb Uploadify vue插件 nginx学习视频 git视频教程 jq选择子元素 jquery延时 linux源码在线阅读 mysql操作日志 idea大小写转换快捷键 sallenkey滤波器 mysql查看锁表 matlab跳出for循环 python程序 python变量定义 python返回函数 python自学入门 java实战 java多态 java程序 java中string的方法 java方法调用 linux系统安装教程图解 高等数学同济第七版 端口关闭工具 js删除节点 js数组移除指定元素 qq免安装 eclipse中文版下载 临时会话 iframe跨域 明解c语言 火萤壁纸下载
当前位置: 首页 > 学习教程  > 编程语言

element-ui查看大图

2020/12/5 9:40:15 文章标签:

element-ui图片&#xff08;查看大图&#xff09;&#xff0c;可通过 previewSrcList 开启预览大图的功能。 写在element-ui表格中&#xff0c;使用作用域插槽循环图片 <!-- template插槽 --> <template slot-scope"scope"><div class"demo-im…

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);
	   });
	});
}

最终效果:
在这里插入图片描述

在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_450057.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?