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 相关文章推荐
javascript 二维数组的实现与应用
Mar 16 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
vue params、query传参使用详解
Sep 12 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 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安全开发库中文详细介绍
2015/03/22 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
python实现数组插入新元素的方法
2015/05/22 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
python高阶爬虫实战分析
2018/07/29 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
用python绘制樱花树
2020/10/09 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
餐饮商业计划书范文
2014/04/29 职场文书
团队激励口号
2014/06/06 职场文书
感恩节寄语2015
2015/03/24 职场文书
学校党员干部承诺书
2015/05/04 职场文书
2016党员党课心得体会
2016/01/07 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang