ElementUI 表格中插入图片缩略图,鼠标悬停显示大图

server/2025/3/18 19:59:26/

如何在 ElementUI 的表格组件 Table 中插入图片缩略图,通过鼠标悬停显示大图?介绍以下2种方式:

方法1:直接在模板元素中插入

<template><el-table :data="tableData"><el-table-column label="图片"><template slot-scope="scope"><el-popover placement="right" trigger="hover"><img :src="scope.row.picture" style="max-width: 500px; max-height: 500px;"><img slot="reference" :src="scope.row.thumbnail" style="width: 50px; height: 50px; vertical-align: middle;"></el-popover></template></el-table-column></el-table>
</template><script>export default {data() {return {tableData: [{thumbnail: 'https://www.lervor.com/thumbnail.jpg',picture: 'https://www.lervor.com/picture.jpg'}]}}}
</script>

方法2:通过表格列属性格式化

<template><el-table :data="tableData"><el-table-columnv-for="(column, index) in columns":key="index":label="column.label":formatter="column.formatter"/></el-table>
</template><script>export default {data() {return {tableData: [{thumbnail: 'https://www.lervor.com/thumbnail.jpg',picture: 'https://www.lervor.com/picture.jpg'}],columns: [{label: '图片',formatter: row => {return this.$createElement('el-popover', {attrs: {trigger: 'hover',placement: 'right'}}, [this.$createElement('img', {attrs: {style: 'max-width: 500px; max-height: 500px;',src: `${row.picture}`}}),this.$createElement('img', {attrs: {style: 'width: 50px; height: 50px; vertical-align: middle;',src: `${row.thumbnail}`},slot: 'reference'})])}}]}}}
</script>


http://www.ppmy.cn/server/176038.html

相关文章

conda创建Python虚拟环境的原理

<Conda>在创建Python虚拟环境时&#xff0c;其背后的原理涉及到Conda包的版本管理和隔离。Conda是一个开源的包管理器和环境管理系统&#xff0c;它主要用于安装、运行和部署各种Python、R、Ruby、Node.js等语言的包、依赖和库。以下是创建Python虚拟环境的原理&#xff…

使用 Docker 部署前端项目全攻略

文章目录 1. Docker 基础概念1.1 核心组件1.2 Docker 工作流程 2. 环境准备2.1 安装 Docker2.2 验证安装 3. 项目配置3.1 项目结构3.2 创建 Dockerfile 4. 构建与运行4.1 构建镜像4.2 运行容器4.3 访问应用 5. 使用 Docker Compose5.1 创建 docker-compose.yml5.2 启动服务5.3 …

电脑如何录屏

以下是电脑录屏的常用方法总结&#xff0c;涵盖系统自带工具、第三方软件及进阶功能&#xff0c;结合不同场景需求推荐最佳方案&#xff1a; 一、系统自带工具 Xbox Game Bar&#xff08;Windows 10/11&#xff09; 操作步骤&#xff1a;按 WinG 打开游戏栏 → 点击录制按钮&am…

JVM调优关注的核心指标?

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

RabbitMQ 基本原理详解

1. 引言 在现代分布式系统中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信、解耦系统组件、提高系统可靠性和扩展性的重要工具。RabbitMQ 作为一款开源的消息中间件&#xff0c;因其高性能、易用性和丰富的功能&#xff0c;被广泛应用于各种场景。…

Android PC 要来了?Android 16 Beta3 出现 Enable desktop experience features 选项

在之前的 《Android 桌面窗口新功能推进》 我们就聊过&#xff0c;Google 就一直在努力改进 Android 的内置桌面模式&#xff0c;例如添加了适当的窗口标题、捕捉窗口的能力、悬停选项、窗口大小调整、最小化支持、app-to-web 等。 比如在搭载 Android 15 QPR 1 Beta 2 的 Pix…

kafka生成者发送消息失败报错:RecordTooLargeException

kafka生成者发送消息典型案例 生产者 发送消息失败&#xff1a;Failed to send; nested exception is org.apache.kafka.common.errors.RecordTooLargeException: The message is 1053512 bytes when serialized which is larger than the maximum request size you have confi…

uniapp vue3项目定义全局变量,切换底部babar时根据条件刷新页面

前言 uniapp项目中&#xff0c;每个tabbar页面来回点时候&#xff0c;不会触发页面更新。但是有时页面上有数据发生改变需要更新模版时&#xff0c;就得能及时的通知到页面。如果在onshow生命周期里每次都调用异步请求更新数据&#xff0c;有些不合理&#xff0c;况且页面有时…