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

news2024/11/19 6:26:26

实现方法,用到了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.coloradmin.cn/o/1375742.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

GLES学习笔记---立方体贴图(一张图)

一、首先看一张效果图 立方体贴图 二、纹理坐标划分 如上图是一张2D纹理&#xff0c;我们需要将这个2D纹理贴到立方体上&#xff0c;立方体有6个面&#xff0c;所以上面的2D图分成了6个面&#xff0c;共有14个纹理坐标 三、立方体 上边的立方体一共8个顶点坐标&#xff0c;范围…

Web3社交治理:用户参与决策的新模式

Web3时代的到来不仅仅带来了区块链技术的创新&#xff0c;还为社交治理带来了全新的模式。传统社交平台上的决策权通常集中在平台的运营方&#xff0c;而Web3社交治理的兴起意味着用户能够更直接地参与到社交平台的决策过程中。本文将深入探讨Web3社交治理的背景、工作原理以及…

9.云原生存储之ceph在k8s中应用及问题处理

文章目录 ceph应用场景ceph应用在k8s集群外使用块设备ceph客户端配置创建块挂载使用删除pool 在k8s集群内使用块设备创建块池和StorageClass使用存储 块存储映射问题处理问题现象事件分析csi-rbdplugin pod日志分析问题小结CentOS 7 编译安装 nbd 模块nbd内核模块介绍安装 nbd …

1.5计算机网络的分类

1.5计算机网络的分类 1.5.1按照网络的作用范围进行分类 1、广域网WAN 广域网WAN&#xff08;WideAreaNetwork&#xff09;&#xff1a;广域网的作用范围通常为几十到几千公里&#xff0c;因而有时也称为远程网(longhaulnetwork)。广域网是互联网的核心部分&#xff0c;其任务…

Linux单主机模拟测试docker macvlan网络

在单台宿主机上使用Linux Bridge&#xff0c;桥接不同网络命名空间&#xff08;namespace&#xff09;的方式&#xff0c;模拟测试docker macvlan网络&#xff0c;记录如下&#xff1a; 参考 链接: Macvlan network driver链接: Docker 网络模型之 macvlan 详解&#xff0c;图…

基于JavaWeb+BS架构+SpringBoot+Vue“共享书角”图书借还管理系统系统的设计和实现

基于JavaWebBS架构SpringBootVue“共享书角”图书借还管理系统系统的设计和实现 文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 文末获取源码 Lun文目录 第1章 概 述 5 1.1 开发背景及研究意义 5 1.2 国内外研究…

数字信号处理实验---LSI系统的分析 Matlab代码

1.试用Matlab计算其幅频特性和相频特性&#xff0c;并绘图。 代码&#xff1a; n 0:10; %定义采样点n w [0:1:500]*2*pi/500; % [0,pi]轴被分成1002个点 x1 power(0.9*exp(1i*pi/3),n); %定义输入序列 x2 exp(-1i*n); %定义一个系统的冲激响应 x zeros(1,length(w))…

ESP32S3+HX8347+RGB运行LVGL例程

之前用3线SPI驱动的HX8347屏其实是一个RGB屏&#xff0c;SPI只是用来给RGB屏幕的做配置的&#xff0c;当然也可以用来驱动屏幕&#xff0c;但是3线SPI驱动能力终究有限。本文谈一下用RGB方式来驱动。 RGB接线比较多&#xff0c;为此做了个转接板&#xff1a; 一、源码 1、scre…

Swoft - Bean

一、Bean 在 Swoft 中&#xff0c;一个 Bean 就是一个类的一个对象实例。 它(Bean)是通过容器来存放和管理整个生命周期的。 最直观的感受就是省去了频繁new的过程&#xff0c;节省了资源的开销。 二、Bean的使用 1、创建Bean 在【gateway/app/Http/Controller】下新建一个名为…

Kotlin-变量定义,与类型

Kotlin-变量定义 变量定义整型浮点型字符型整型之间的转换Boolean类型Null安全安全调用Elvis运算 字符串 变量定义 Kotlin可以定义的时候不标明数据的数据类型&#xff0c;编译器会根据初始值确定类型 fun main() {var b:Intvar name "crazyit.org"//声名变量的时…

ptaR7-5打探基priority_queue的使用

题目 最近乐乐开发出了一款新的游戏《打探基》&#xff0c;这款游戏需要多人配合来玩&#xff0c;至少三个游戏玩家同时出招才能使探基的血量下降一点&#xff0c;同时&#xff0c;出招的每个人战斗力下降一点&#xff0c;当战斗力小于10的时候将不能再出招&#xff0c;不知道…

系分笔记计算机网络功能、分类和部署

文章目录 1、概述2、计算机网络的功能3、计算机网络的部署结构4、计算机网络的分类4、总结 1、概述 计算机网络是系统分析师常考查的知识点&#xff0c;虽然不是专业的网络考试&#xff0c;但是网络常识是每一个考生需要掌握的。 2、计算机网络的功能 计算机网络是计算机技术与…

计算机毕业设计 基于SpringBoot的物资综合管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

uniapp打包h5部署到服务器

在学习uniapp&#xff0c;部署前后端分离项目。将h5的dist文件打包好后一直在考虑如何通过nginx反向代理到后端接口&#xff0c;整了半天也没整成。最后才发现&#xff0c;uniapp打包的h5页面包好像不需要反向代理到后端接口&#xff0c;只需要通过nginx将dist下的h5包代理了&a…

【AI】AI和医疗大数据(2/3)

目录 四、医疗大数据理论和技术 五、非结构化处理的重要性和方法 5.1 采集技术 5.2 处理技术 5.3 存储技术 5.4 关于Mapreduce 四、医疗大数据理论和技术 医疗大数据的理论和技术主要包括以下几个方面&#xff1a; 数据整合管理技术&#xff1a;这包括多源医疗大数据的语…

【软件测试】学习笔记-从0到1:API测试怎么做

这篇文章是API测试的基础&#xff0c;先从0到1设计一个API测试用例&#xff0c;通过这个测试用例&#xff0c;体会到最基本的API测试是如何进行的&#xff0c;并介绍几款常用的API测试工具。 API测试的基本步骤 通常来讲&#xff0c;无论采用什么API测试工具&#xff0c;API测…

JVM初识

什么是JVM&#xff1f; JVM全称是Java Virtual Machine&#xff0c;中文译名Java虚拟机。 JVM本质上是一个运行在计算机上的程序&#xff0c;他的职责是运行Java字节码文件。 JVM的功能 jvm的功能主要分为三部分&#xff1a; 解释和运行 对字节码文件中的指令&#xff0c;实…

【JavaWeb学习笔记】19 - 网购家居项目开发(上)

一、项目开发流程 程序框架图 项目具体分层方案 MVC 1、说明是MVC MVC全称: Mode模型、View视图、Controller控制器。 MVC最早出现在JavaEE三层中的Web层&#xff0c;它可以有效的指导WEB层的代码如何有效分离&#xff0c;单独工作。 View视图:只负责数据和界面的显示&…

imgaug库指南(17):从入门到精通的【图像增强】之旅

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…

Win2008R2上RedisDesktopManager 黑屏

问题&#xff1a; 运行发现右侧显示缓存信息的部分是黑屏。 解决方式&#xff1a; 管理工具->远程桌面服务->远程桌面会话主机配置->RDP-TCP->属性->客户端设置->颜色深度->限制最大颜色深度,将16位改为32位