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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
跟我学习javascript的this关键字
May 28 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 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几个数学计算的内部函数学习整理
2011/08/06 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
vuex实现的简单购物车功能示例
2019/02/13 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python装饰器用法示例小结
2018/02/11 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python打包成so文件过程解析
2019/09/28 Python
详解Django CAS 解决方案
2019/10/30 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
汽修专业学生自我鉴定
2013/11/16 职场文书
升国旗仪式主持词
2014/03/19 职场文书
授权委托书怎么写
2014/09/25 职场文书
国际贸易实训报告
2014/11/05 职场文书
2015年司法局工作总结
2015/05/22 职场文书
用python自动生成日历
2021/04/24 Python
配置nginx 重定向到系统维护页面
2021/06/08 Servers