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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue中element-ui表格缩略图悬浮放大功能的实例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1330字，纯文字阅读大概需要2分钟。

内容图文

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弹出框

总结

以上所述是小编给大家介绍的vue中element-ui表格缩略图悬浮放大功能的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

内容总结

以上是互联网集市为您收集整理的vue中element-ui表格缩略图悬浮放大功能的实例代码全部内容，希望文章能够帮你解决vue中element-ui表格缩略图悬浮放大功能的实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---