gpt4 book ai didi

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

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章element-ui点击查看大图的方法示例由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

element-ui图片(查看大图),可通过 previewSrcList 开启预览大图的功能.

写在element-ui表格中,使用作用域插槽循环图片 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 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中 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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查看大图内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。

原文链接:https://blog.csdn.net/weixin_47300932/article/details/110676859 。

最后此篇关于element-ui点击查看大图的方法示例的文章就讲到这里了,如果你想了解更多关于element-ui点击查看大图的方法示例的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com