点击按钮显示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;
      });
    },
相关推荐
yqcoder3 分钟前
vue2 和 vue3 中,列表中的 key 值作用
前端·javascript·vue.js
U***49834 分钟前
前端TypeScript教程汇总,从基础到高级
前端·javascript·typescript
梵得儿SHI4 分钟前
Vue 指令系统:事件处理与表单绑定全解析,从入门到精通
前端·javascript·vue.js·v-model·v-on·表单数据绑定·表单双向绑定
IT_陈寒7 分钟前
Vue3性能优化实战:我从这5个技巧中获得了40%的渲染提升
前端·人工智能·后端
二川bro7 分钟前
第45节:分布式渲染:Web Workers多线程渲染优化
开发语言·javascript·ecmascript
lcc1877 分钟前
Vue props
前端·vue.js
落霞的思绪10 分钟前
Cesium里的postProcessStages实现暗黑样式的天地图
前端·gis·cesium
DevUI团队14 分钟前
🔥Angular开发者看过来:不止于Vue,MateChat智能化UI库现已全面支持Angular!
前端·人工智能·angular.js
onebound_noah26 分钟前
电商图片搜索:技术破局与商业落地,重构“视觉到交易”全链路
大数据·前端·网络·人工智能·重构·php
答案answer36 分钟前
一个超级真实的Three.js树🌲生成器插件
前端·three.js