点击按钮显示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;
      });
    },
相关推荐
学以智用3 小时前
Vue 3 核心函数全解(组合式 API + 常用工具函数)
javascript·vue.js
看晴天了3 小时前
新框架electronbun项目入门指南,解决electron体积大的难题,Electrobun:Electron 的轻量级革命 —— 12MB 应用 +
前端·架构
哇哇哇哇3 小时前
跨域:原因、解决方案CORS、JSONP、proxy、iframe(自用)
前端
Cache技术分享3 小时前
346. Java IO API - 操作文件和目录
前端·后端
滕青山3 小时前
HTTP状态查询 在线工具核心JS实现
前端·javascript·vue.js
左右用AI3 小时前
给你的AI员工装个对讲机:3步搞定小龙虾Telegram遥控
前端
忆江南4 小时前
# iOS 电量优化详解
前端
忆江南4 小时前
# iOS weak 原理详解
前端
小码哥_常4 小时前
解锁Android开发封装密码,打造高效代码城堡
前端