element-ui点击查看大图的方法示例


Posted in Javascript onDecember 14, 2020

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-ui点击查看大图的方法示例

到此这篇关于element-ui查看大图的方法示例的文章就介绍到这了,更多相关element查看大图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
vue发送ajax请求详解
Oct 09 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
JS实现可控制的进度条
Mar 25 Javascript
小程序中手机号识别的示例
Dec 14 #Javascript
Vue如何跨组件传递Slot的实现
Dec 14 #Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 #Vue.js
vue3.0实现插件封装
Dec 14 #Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 #Vue.js
浅谈JSON5解决了JSON的两大痛点
Dec 14 #Javascript
Vue实现点击当前行变色
Dec 14 #Vue.js
You might like
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php编程每天必学之表单验证
2016/03/01 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
python类继承用法实例分析
2014/10/10 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python探索之创建二叉树
2017/10/25 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
python中pop()函数的语法与实例
2020/12/01 Python
交通安全演讲稿
2014/01/07 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
超市活动计划书
2014/04/24 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
公司离职证明标准样本
2014/10/05 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android