点击按钮显示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;
      });
    },
相关推荐
AskHarries几秒前
收到第一封推广邮件:我的 App 正在被看见
前端·后端·产品
蚂蚁集团数据体验技术3 分钟前
AI 文字信息图表的技术选型
前端·javascript·github
胡楚昊5 分钟前
Polar WEB(21-
前端
BD_Marathon12 分钟前
【JavaWeb】HTML专业词汇
前端
lichong95116 分钟前
鸿蒙系统 4.1.0 兼容 Android apk 如何检测兼容的 Android 系统版本是多少
前端·javascript
colorFocus19 分钟前
Vue之如何获取自定义事件返回值
前端·vue.js
草帽lufei19 分钟前
业务代码迭代重构利器:SOLO中国版保障项目需求
前端·ai编程·trae
好_快19 分钟前
Arco Design Layout 中使用 ResizeBox 实现可拖拽侧边栏
前端·vue.js·arco design
国服第二切图仔19 分钟前
Electron for 鸿蒙PC项目实战—折线图组件
javascript·electron·鸿蒙pc
重铸码农荣光20 分钟前
JavaScript 面向对象编程:从字面量到原型继承的深度探索
前端·javascript·设计模式