vue2 el-table行悬停时弹出提示信息el-popover

实现方法,用到了cell-mouse-enter、cell-mouse-leave两个事件,然后在表格的首列字段中,加个el-popover组件,当然你也可以选择在其他字段的位置来显示提示框,看自己的需求了。

示例代码:

<el-table @cell-mouse-enter="enter" @cell-mouse-leave="leave" :data="[{rowIndex:100, title:'行一', status: 1},{rowIndex:200, title:'行二', status: 0}]"><el-table-column label="序号" width="100"><template slot-scope="scope"><el-popover trigger="manual" placement="right" :ref="'popover'+(scope.row.rowIndex)"><div>弹出popover提示内容</div><div slot="reference">{{ scope.$index+1 }}</div></el-popover></template></el-table-column><el-table-column label="标题" prop="title"></el-table-column>
</el-table>
enter (row, column, cell) {this.$refs['popover' + row.rowIndex].showPopper = true
},
leave (row, column, cell) {this.$refs['popover' + row.rowIndex].showPopper = false
}

在enter方法中,还可以根据row行数据进行一些处理,比如根据状态status来判断是否弹出提示框。

enter (row, column, cell) {//当status等于0时弹出提示框if(row.status===0) {this.$refs['popover' + row.rowIndex].showPopper = true}
},
leave (row, column, cell) {this.$refs['popover' + row.rowIndex].showPopper = false
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/409852.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年【危险化学品生产单位主要负责人】免费试题及危险化学品生产单位主要负责人实操考试视频

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品生产单位主要负责人免费试题考前必练&#xff01;安全生产模拟考试一点通每个月更新危险化学品生产单位主要负责人实操考试视频题目及答案&#xff01;多做几遍&#xff0c;其实通过危险化学品生产单位主要…

rust跟我学三:文件时间属性获得方法

图为RUST吉祥物 大家好,我是get_local_info作者带剑书生,这里用一篇文章讲解get_local_info是怎样获得杀毒软件的病毒库时间的。 首先,先要了解get_local_info是什么? get_local_info是一个获取linux系统信息的rust三方库,并提供一些常用功能,目前版本0.2.4。详细介绍地址…

微信小程序防止截屏录屏

一、使用css添加水印 使用微信小程序原生的view和css给屏幕添加水印这样可以防止用户将小程序内的隐私数据进行截图或者录屏分享导致信息泄露&#xff0c;给小程序添加一个水印浮层。这样即使被截图或者拍照&#xff0c;也能轻松地确定泄露的源头。效果图如下&#xff1a; 代码…

OpenHarmony4.0适配LVDS屏幕驱动

1.概述 手头有一块RK3568的开发板OK3568-C&#xff0c;但是还没有适配OpenHarmony&#xff0c;用的还是LVDS屏幕&#xff0c;但是官方和网上好像还没有OpenHarmony4.0的LVDS屏幕驱动的通用实现&#xff0c;所以决定尝试了一下适配该开发板&#xff0c;完成LVDS屏幕驱动的适配&…

MongoDB - 库、集合、文档(操作 + 演示 + 注意事项)

目录 一、MongoDB 1.1、简介 a&#xff09;MongoDB 是什么&#xff1f;为什么要使用 MongoDB&#xff1f; b&#xff09;应用场景 c&#xff09;MongoDB 这么强大&#xff0c;是不是可以直接代替 MySQL &#xff1f; d&#xff09;MongoDB 中的一些概念 e&#xff09;Do…

meter报OOM错误,如何解决?

根据在之前的压测过程碰到的问题&#xff0c;今天稍微总结总结&#xff0c;以后方便自己查找。 一、单台Mac进行压测时候&#xff0c;压测客户端Jmeter启动超过2000个线程&#xff0c;Jmeter报OOM错误&#xff0c;如何解决&#xff1f; 解答&#xff1a;单台Mac配置内存为8G&…

ATA-1222A宽带放大器在二极管测试中的应用有哪些

宽带放大器是一种用于放大高频信号的电子设备&#xff0c;它在二极管测试中有多种应用。下面安泰电子将介绍宽带放大器在二极管测试中的几种常见应用。 宽带放大器可以用于二极管参数测试。二极管是一种常见的半导体器件&#xff0c;有正向电压-电流特性和反向电压-电流特性。为…

SpringBoot-Starter 自动锁组件

在日常业务开发的过程中&#xff0c;我们经常会遇到存在高并发的场景&#xff0c;这个时候都会选择使用redis来实现一个锁&#xff0c;来防止并发。 但是很多时候&#xff0c;我们可能业务完成后&#xff0c;就需要把锁释放掉&#xff0c;给下一个线程用&#xff0c;但是如果我…

Python爬虫实战:IP代理池助你突破限制,高效采集数据

当今互联网环境中&#xff0c;为了应对反爬虫、匿名访问或绕过某些地域限制等需求&#xff0c;IP代理池成为了一种常用的解决方案。IP代理池是一个包含多个可用代理IP地址的集合&#xff0c;可以通过该代理池随机选择可用IP地址来进行网络请求。 IP代理池是一组可用的代理IP地址…

纯c++简易的迷宫小游戏

一个用c写的黑框框迷宫 适合新手入门学习 也适合大学生小作业 下面附上代码 总体思路 初始化游戏界面&#xff1a;设置迷宫的大小&#xff08;WIDTH和HEIGH&#xff09;&#xff0c;生成迷宫地图&#xff08;map&#xff09;&#xff0c;包括墙壁、空地、起点和终点。显示…

Spark与HBase的集成与数据访问

Apache Spark和Apache HBase分别是大数据处理和分布式NoSQL数据库领域的两个重要工具。在本文中&#xff0c;将深入探讨如何在Spark中集成HBase&#xff0c;并演示如何通过Spark访问和操作HBase中的数据。将提供丰富的示例代码&#xff0c;以便更好地理解这一集成过程。 Spark…

物联网介绍

阅读引言&#xff1a; 本文从多方面叙述物联网的定义以及在物联网当中的各种通信的介绍。 一、物联网的定义 1.1 通用的定义 物联网&#xff08;Internet of Things&#xff0c;IOT&#xff1b;也称为Web of Things&#xff09;是指通过各种信息传感设 备&#xff0c;如传感器、…