当前位置: 首页 > news >正文

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
}

相关文章:

  • XXL-Job的搭建接入Springboot项目(详细)
  • RTSP/Onvif安防视频云平台EasyNVR迁移盘符后启动异常的问题排查与解决
  • HashMap学习和线程安全的HashMap
  • 蓝桥杯每日一题----货物摆放
  • web架构师编辑器内容-编辑器组件图层面板功能开发-锁定隐藏、键盘事件功能的开发
  • 中级Python面试问题
  • 概率论与数理统计————3.随机变量及其分布
  • STM32F103标准外设库——中断应用/事件控制器(六)
  • 线性代数的学习和整理23:用EXCEL计算 向量/向量组的点乘 (内积) (建设ing)
  • 数据集成时表模型同步方法解析
  • postman后端测试时invalid token报错+token失效报错解决方案
  • 走迷宫(c语言)
  • Firefox 100 正式发布
  • 接口自动化测试持续集成,Soapui接口功能测试参数化
  • npm install 卡住不动的六种解决方法
  • 【剑指offer】让抽象问题具体化
  • 【跃迁之路】【733天】程序员高效学习方法论探索系列(实验阶段490-2019.2.23)...
  • Invalidate和postInvalidate的区别
  • iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...
  • Objective-C 中关联引用的概念
  • PHP CLI应用的调试原理
  • PHP变量
  • PHP的类修饰符与访问修饰符
  • vue-loader 源码解析系列之 selector
  • 分享几个不错的工具
  • 猴子数据域名防封接口降低小说被封的风险
  • 基于OpenResty的Lua Web框架lor0.0.2预览版发布
  • 经典排序算法及其 Java 实现
  • 那些被忽略的 JavaScript 数组方法细节
  • 盘点那些不知名却常用的 Git 操作
  • 前端存储 - localStorage
  • 区块链分支循环
  • 融云开发漫谈:你是否了解Go语言并发编程的第一要义?
  • 深度学习中的信息论知识详解
  • 使用Swoole加速Laravel(正式环境中)
  • ​用户画像从0到100的构建思路
  • !!java web学习笔记(一到五)
  • # 手柄编程_北通阿修罗3动手评:一款兼具功能、操控性的电竞手柄
  • (echarts)echarts使用时重新加载数据之前的数据存留在图上的问题
  • (Mirage系列之二)VMware Horizon Mirage的经典用户用例及真实案例分析
  • (Spark3.2.0)Spark SQL 初探: 使用大数据分析2000万KF数据
  • (多级缓存)缓存同步
  • (附源码)SSM环卫人员管理平台 计算机毕设36412
  • (附源码)基于SpringBoot和Vue的厨到家服务平台的设计与实现 毕业设计 063133
  • (收藏)Git和Repo扫盲——如何取得Android源代码
  • (转)c++ std::pair 与 std::make
  • (转)全文检索技术学习(三)——Lucene支持中文分词
  • .Family_物联网
  • .Net Core缓存组件(MemoryCache)源码解析
  • .NET Micro Framework 4.2 beta 源码探析
  • .netcore如何运行环境安装到Linux服务器
  • .set 数据导入matlab,设置变量导入选项 - MATLAB setvaropts - MathWorks 中国
  • /usr/bin/python: can't decompress data; zlib not available 的异常处理
  • @KafkaListener注解详解(一)| 常用参数详解
  • @RequestBody详解:用于获取请求体中的Json格式参数