点击按钮显示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;
      });
    },
相关推荐
小牛itbull9 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i18 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_20 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun26 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜30 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
计算机毕设指导61 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea