Vue + ElementUI表格内实现图片点击放大效果的两种实现方式

<el-table-column label="物品图片" header-align="center" align="center">
  <template slot-scope="scope">
    <el-popover placement="top-start" trigger="click"> <!--trigger属性值：hover、click、focus 和 manual-->
      <a :href="scope.row.goodsImg" rel="external nofollow"  target="_blank" title="查看最大化图片">
        <img :src="scope.row.goodsImg" style="width: 300px;height: 300px">
      </a>
      <img slot="reference" :src="scope.row.goodsImg" style="width: 50px;height: 50px; cursor:pointer">
    </el-popover>
  </template>
</el-table-column>

npm install v-viewer --save

import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: {
    'inline': true,
    'button': true,
    'navbar': true,
    'title': true,
    'toolbar': true,
    'tooltip': true,
    'movable': true,
    'zoomable': true,
    'rotatable': true,
    'scalable': true,
    'transition': true,
    'fullscreen': true,
    'keyboard': true,
    'url': 'data-source'
  }
})

<viewer>
  <img
    :src="scope.row.goodsImg"
    style="width: 50px;height: 50px; cursor:pointer">
</viewer>
// 或
<div v-viewer>
  <img
    :src="scope.row.goodsImg"
    style="width: 50px;height: 50px; cursor:pointer">
</div>

<div>
  <viewer :images="signImages">
    <!-- signImages一定要一个数组，否则报错 -->
    <img
      v-for="(src,index) in signImages"
      :src="src"
      :key="index"
      width="50">
  </viewer>
</div>
<!-- signImages数组放在 export default ——> data() ——> return 里面 -->
signImages: [
  'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3d9fc10fa3014c08063b2ea53a7a025b/359b033b5bb5c9eac1754f45df39b6003bf3b396.jpg',
  'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg',
  'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=7ecc7f20ae0f4bfb93d09854334e788f/10dfa9ec8a1363279e1ed28c9b8fa0ec09fac79a.jpg'
],