vue中element-ui表格缩略图悬浮放大功能的实例代码_elementui缩略图

唇齿深渊，眉眼之间，我喜欢你年复一年。

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

<el-table-column align="center" width="80" prop="head" label="头像">
      <template scope="scope">
          <el-popover placement="right" title="" trigger="hover">
              <img :src="scope.row.head" style="height: 500px;width: 500px">
              <img slot="reference" :src="scope.row.head" alt="" style="max-height: 50px;max-width: 130px">
          </el-popover>
      </template>
  </el-table-column>
1
2
3
4
5
6
7
8

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

此处缩略图和大图都是同一张图片，如果有不同的图片，也是可以的，只需要在 :src 中设置不同的值即可

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