点击按钮显示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;
      });
    },
相关推荐
POLITE316 分钟前
Leetcode 437. 路径总和 III (Day 16)JavaScript
javascript·算法·leetcode
難釋懷28 分钟前
解决状态登录刷新问题
java·开发语言·javascript
ヤ鬧鬧o.39 分钟前
多彩背景切换演示
前端·css·html·html5
一起养小猫1 小时前
Flutter实战:从零实现俄罗斯方块(三)交互控制与事件处理
javascript·flutter·交互
lethelyh1 小时前
Vue day1
前端·javascript·vue.js
酉鬼女又兒1 小时前
SQL113+114 更新记录(一)(二)+更新数据知识总结
java·服务器·前端
无风听海1 小时前
AngularJS中 then catch finally 的语义、执行规则与推荐写法
前端·javascript·angular.js
利刃大大1 小时前
【Vue】组件化 && 组件的注册 && App.vue
前端·javascript·vue.js
Whisper_Sy1 小时前
Flutter for OpenHarmony移动数据使用监管助手App实战 - 周报告实现
开发语言·javascript·网络·flutter·php
Anastasiozzzz1 小时前
leetcodehot100--最小栈 MinStack
java·javascript·算法