点击按钮显示el-image

点击按钮显示el-image

data中数据定义

javascript 复制代码
  imgList: []

编写按钮

javascript 复制代码
 <el-button
    type="success"
    size="mini"
    @click="priviewImg(scope.row.checkImageArray)"
  >
    查看
  </el-button>

el-image

javascript 复制代码
 <el-image
   ref="refImg"
    v-for="(itemUrl, index) in imgList"
    :key="index"
    class="item"
    :preview-src-list="imgList"
    :src="itemUrl"
  ></el-image>

按钮点击事件

javascript 复制代码
priviewImg(checkImageArray) {
      this.imgList = checkImageArray;
      this.$nextTick(() => {
        console.log("this.$refs.refImg", this.$refs.refImg[0]);
        this.$refs.refImg[0].showViewer = true;
      });
    },
相关推荐
我来变强了19 分钟前
token无感刷新全流程
java·vue.js
光影少年24 分钟前
vite7更新了哪些内容
前端
六月的可乐26 分钟前
前端自定义右键菜单与图片复制(兼容H5)
前端
浮游本尊1 小时前
React 18.x 学习计划 - 第八天:React测试
前端·学习·react.js
麦麦在写代码1 小时前
前端学习1
前端·学习
sg_knight1 小时前
微信小程序中 WebView 组件的使用与应用场景
前端·javascript·微信·微信小程序·小程序·web·weapp
凯子坚持 c2 小时前
生产级 Rust Web 应用架构:使用 Axum 实现模块化设计与健壮的错误处理
前端·架构·rust
IT_陈寒2 小时前
Python 3.12新特性实战:5个让你的代码效率翻倍的隐藏技巧!
前端·人工智能·后端
程序员小寒2 小时前
前端高频面试题之Vuex篇
前端·javascript·面试
网硕互联的小客服2 小时前
如何解决 Linux 文件系统挂载失败的问题?
linux·服务器·前端·网络·chrome