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 相关文章推荐
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
vue 中swiper的使用教程
May 22 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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语言流程控制中的主动与被动
2012/11/05 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
js资料toString 方法
2007/03/13 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
python实现从web抓取文档的方法
2014/09/26 Python
Python聊天室程序(基础版)
2018/04/01 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
信号生成及DFT的python实现方式
2020/02/25 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
初婚未育未抱养证明
2014/01/12 职场文书
文体活动实施方案
2014/03/27 职场文书
三好学生事迹材料
2014/12/24 职场文书
学习保证书怎么写
2015/02/26 职场文书
证婚人致辞精选
2015/07/28 职场文书
化验室安全管理制度
2015/08/06 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python