点击按钮显示el-image

点击按钮显示el-image

data中数据定义

  imgList: []

编写按钮

 <el-button
    type="success"
    size="mini"
    @click="priviewImg(scope.row.checkImageArray)"
  >
    查看
  </el-button>

el-image

 <el-image
   ref="refImg"
    v-for="(itemUrl, index) in imgList"
    :key="index"
    class="item"
    :preview-src-list="imgList"
    :src="itemUrl"
  ></el-image>

按钮点击事件

priviewImg(checkImageArray) {
    
    
      this.imgList = checkImageArray;
      this.$nextTick(() => {
    
    
        console.log("this.$refs.refImg", this.$refs.refImg[0]);
        this.$refs.refImg[0].showViewer = true;
      });
    },

猜你喜欢

转载自blog.csdn.net/XiaoCaiHenMiMang/article/details/141823610