element-ui表格缩略图悬浮放大

element-ui界面很是简洁和美观，提供的组件能够知足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？element-ui虽然没有直接提供图片悬浮放大的组件，可是能够使用Popover弹出框组件，同样实现效果，以下：

具体的代码（此处只是图片单元格的代码，其它代码省略）：

<el-table-column
    prop="picture"
    header-align="center"
    align="center"
    width="150px"
    label="图片">
    <template slot-scope="scope">
      <el-popover
        placement="right"
        title=""
        trigger="hover">
        <img :src="scope.row.picture"/>
        <img slot="reference" :src="scope.row.picture" :alt="scope.row.picture" style="max-height: 50px;max-width: 130px">
      </el-popover>
    </template>
</el-table-column>

其中能够看到<el-popover>标签包围的有两个<img/>标签，第一个是悬浮放大的图片定义，第二个是表格中显示的索勒图定义，它有一个关键的属性 slot="reference" 。而<el-popover>的触发方式是 hover，即当鼠标浮动在表格图片上时，自动显示大图片，除了支持 hover 方式外，还支持 click，focus 和 manual；此处title的属性值设为""，即不显示标题。

此处缩略图和大图都是同一张图片，若是有不一样的图片，也是能够的，只须要在 :src 中设置不一样的值便可

关于Popover的详细使用说明，建议参考官方文档Popover弹出框