vue中element-ui表格缩略图悬浮放大功能的实例代码
作者：十方 发布时间：2024-05-29 22:44:31
标签：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弹出框
总结
以上所述是小编给大家介绍的vue中element-ui表格缩略图悬浮放大功能的实例代码网站的支持！
来源：https://segmentfault.com/a/1190000015350408
0
投稿猜你喜欢
- 今天我升级MYSQL到5.1的时候遇到的。写出来共享以下。1、[root@localhost mysql]# scripts/mysql_i
- 一、使用 reflect.Type 创建实例在通过 reflect.TypeOf 函数获取到变量的反射类型对象之后，可以通过反射类型对象 r
过年GUI博客二连发，本打算出去玩玩，奈何空气，天气实在差，遂使用tkinter开发一款GUI刷屏器，写此博客记录一下我的开发思路。一．准备- 高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小，更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们
- 图片人脸识别import cv2filepath = "img/xingye-1.png"img = cv2.imrea
- 需要写个js滑动展开折叠（收缩）的效果，搜索到无忧脚本的一篇贴子，稍加修改了下使其在FF也可应用，代码如下： <
- SQL Server 2008我们也能从中体验到很多新的特性，但是对于SQL Server 2008安装，还是用图来说话比较好。本文将从SQ
- 一下demo演示2.0中的vue-router是如何获取到不同参数的，并在地址栏中匹配不同的信息 <!DOCTYPE html>
- 一般来说，要使用某个类的方法，需要先实例化一个对象再调用方法。而使用@staticmethod或@classmethod，就可以不需要实例化
- 什么是ASP，它能干什么？ 一、什么是ASP？ 从字面上说，ASP包含三方面含义： 1、Active：ASP使用了Microsoft的Act
- 可能大家在日常工作中会遇到这么个问题，现在基本的linux系统都是自带老版本的python2.7.x版本，我又不想用老版本，但直接升级可能会
- 最近在公司接到一个需求，里面有一个 * 跳转。类似于选择地址的时候，选择的顺序是：省份->市->区。如果分三个页面跳转，那么体验非
- //Paul Tero, July 2001 //http://www.tero.co.uk/des/ // //Optimised for
- 隐藏并修改文件的最后修改时间的asp-webshell。源码：<％ '隐藏并修改文件的最后修改时间的aspshell '
- 前言本文主要给大家介绍了关于Python用字符串调用函数或方法的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：先看一个例子：&
- 对Vue全家桶有基本的认知.用有node环境了解express一丶业务分析1.什么情况下进行权限验证?访问敏感接口前端向后端敏感接口发送aj
- 互联网上不计其数的信息本质上都是一个一个的HTML文档组成的，通过链接将它们串联起整个互联网。这就犹如骨肉之于人体一样，只有通过经脉才能将它
- 使用：foldercleanup.py -d 10 -k c:\test\keepfile.txt c:\test表示对c:\test目录只
- 本文实例讲述了Python中random模块用法。分享给大家供大家参考。具体如下：import randomx = random.randi
- 在密码学中，凯撒密码（或称恺撒加密、恺撒变换、变换加密）是一种最简单且最广为人知的加密技术。它是一种替换加密的技术。这个加密方法是以恺撒的名
