Jeecgboot table列表查看放大图片

今天研究了一下午，在jeecgboot的table里面展示图片，并且点击图片的时候放大图片，前端框架并没有组件可使用查看图片，于是自己写了一个

步骤如下：

1、监听vue页面的监听事件

created() {
  this.loadData();
  document.addEventListener('click', (e) => {
    console.log(e)
   if(e.target.localName=='img'&&e.target.currentSrc){
     this.visible=true;
     this.imgPath=e.target.currentSrc
   }
  }, false)
},

 

2、找到img的click事件

 

 

 

 

 

这样就能获取到table列表要点击放大图片的路径，得到图片的路径在用一个弹出框去渲染，得到下面的的效果

　　

<div>
  <a-modal
          title="查看二维码"
          :visible="visible"
          :footer="null"
          @cancel="handleCancel"
  >
    <div style="width: 100%;margin: 0 auto;text-align: center"> <img :src="imgPath" /></div>
  </a-modal>
</div>