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>