Vue ElemetUI table的行实现按住上下键高亮上下移动效果
1、添加初始化的方法
// 添加键盘事件监听器:
mounted() {window.addEventListener('keydown', this.handleKeydown);},
// 这段代码的作用是在 Vue 组件销毁之前移除一个键盘事件监听器
// 这样做可以确保当组件不再使用时,不会留下任何未清理的事件监听器,从而避免内存泄漏等问题。
beforeDestroy() {window.removeEventListener('keydown', this.handleKeydown);}
2、在el-table中添加 @current-change方法
// 如下
<el-table @current-change="handleCurrentChange">
3、添加对应键盘操作方法
handleCurrentChange(val) {this.currentRow = val;
},
handleKeydown(event) {console.log(event.keyCode)if (event.keyCode === 38) { // 按下上键this.highlightPrevRow();} else if (event.keyCode === 40) { // 按下下键this.highlightNextRow();}
},
highlightPrevRow() {const index = this.boxList.indexOf(this.currentRow) - 1;if (index >= 0) {this.$refs.tableRef.setCurrentRow(this.boxList[index]);}
},
highlightNextRow() {const index = this.boxList.indexOf(this.currentRow) + 1;if (index < this.boxList.length) {this.$refs.tableRef.setCurrentRow(this.boxList[index]);}
},
4、还可以为高亮设置自定义颜色
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
.el-table__body tr.current-row>td {color: #fff;background-color: #adeda6 !important;
}
相关文章:
Vue ElemetUI table的行实现按住上下键高亮上下移动效果
1、添加初始化的方法 // 添加键盘事件监听器: mounted() {window.addEventListener(keydown, this.handleKeydown);}, // 这段代码的作用是在 Vue 组件销毁之前移除一个键盘事件监听器 // 这样做可以确保当组件不再使用时,不会留下任何未清理的事件监听…...
windows C++-指定特定的计划程序策略
通过计划程序策略,可控制计划程序在管理任务时使用的策略。 本文演示如何使用计划程序策略来增加将进度指示器打印到控制台的任务的线程优先级。 示例 以下示例并行执行两个任务。 第一个任务计算第 n 个斐波那契数。 第二个任务将进度指示器打印到控制台。 第一…...
python脚本程序怎么写更优雅?argparse模块巧妙应用
前言 命令行程序,也称CLI程序,另一个直观的名字是脚本程序,简称脚本,由于没有图形用户界面(GUI),所以脚本程序常见的交互方式有3种: 1、脚本程序中读取环境变量,比如env…...
【React】(推荐项目)使用 React、Socket.io、Nodejs、Redux-Toolkit、MongoDB 构建聊天应用程序 (2024)
使用 React、Socket.io、Nodejs、Redux-Toolkit、MongoDB 构建聊天应用程序 (2024) 学习使用 React、Socket.io、Node.js、Redux-Toolkit 和 MongoDB 构建响应式实时消息聊天应用程序。这个项目涵盖了从设置到实施的所有内容,提供了宝贵的见解和实用技能。无论您是…...
C++:std::move 和 std::forward
先说结论: std::forward:用于完全按照传递的参数转发,保留其值类别(左值或右值)std::move:用于将对象转换为右值引用,通常用于启用移动语义并转移所有权 示例: 先看一个简单的示例࿰…...
PHP探索校园新生态校园帮小程序系统小程序源码
探索校园新生态 —— 校园帮小程序系统,让生活更精彩! 🌱【开篇:走进未来校园,遇见新生态】🌱 你是否厌倦了传统校园的繁琐与单调?是否渴望在校园里也能享受到便捷、智能的生活体验࿱…...
通信工程学习:什么是MANO管理编排
MANO:管理编排 MANO:Management and Network Orchestration(管理和网络编排)在网络功能虚拟化(NFV)架构中扮演着至关重要的角色。MANO是一个由多个功能实体组合而成的层次,这些功能实体负责管理…...
备战软考Day04-计算机网络
1、计算机网络的分类 2、七层网络体系结构 3、网络的设备与标准 4、TCP/IP协议族 TCP/IP作为Internet的核心协议,被广泛应用于局域网和广域网中,目前已成为事实上的国际标准 1、TCP/IP分层模型 TCP/IP协议是Internet的基础和核心,和OSI参考…...
可以把台式电脑做成服务器吗
是的,台式电脑可以被改造成服务器。以下是一些步骤和考虑因素,可以帮助你实现这一目标: 1. 选择合适的操作系统 Windows Server:如果你习惯于Windows环境,可以选择Windows Server版本,适合运行多种服务&a…...
JavaScript 输出方式
JavaScript 提供了多种输出方式,用于在浏览器中显示信息。以下是几种常见的输出方式及其详细代码示例: 1. console.log() 用于在浏览器的开发者控制台输出信息,常用于调试。 优点: 调试方便:可以输出任意类型的数据&…...
微服务(一)
目录 一、概念 1、单体架构 2、微服务 3、springcloud 二、微服务的拆分 1、微服务的拆分原则 1.1 什么时候拆 1.2 怎么拆 2、服务调用 2.1 resttemplate 2.2 远程调用 一、概念 1、单体架构 单体架构(monolithic structure):顾名…...
Uniapp时间戳转时间显示/时间格式
使用uview2 time 时间格式 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 <text class"cell-tit clamp1">{{item.create_time}} --- {{ $u.timeFormat(item.create_time, yyyy-mm-dd hh:MM:ss)}} </text>...
C++类和对象(中)【下篇】
🌟个人主页:落叶 🌟当前专栏: C专栏 目录 赋值运算符重载 运算符重载 赋值运算符重载 日期类实现 运算符重载<和运算符重载 运算符重载进行复用 运算符重载< 运算符重载> 运算符重载> 运算符重载! 获取某年某月的天数…...
【亿美软通-注册/登录安全分析报告】
前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 暴力破解密码,造成用户信息泄露短信盗刷的安全问题,影响业务及导致用户投诉带来经济损失,尤其是后付费客户,风险巨大,造成亏损无底洞…...
数据分析学习之学习路线
前言 我们之前通过cda认证了解到数据分析行业,但是获取到证书,并不代表着,我们已经拥有的数据分析的能力,所以通过系统的学习数据分析需要掌握的能力,并学习大佬们的分析经验、分析思路,才是成为数据分析师…...
Oracle逻辑备份脚本【生产环境适用】
1 说明 从Oracle10g开始,引入了数据泵(Data Pump),是一种高效的数据传输工具,它通过导出(Export)和导入(Import)的方式帮助用户迁移数据。 在Oracle的产品设计中&#…...
Python范例总结
一、基础功能 1、操作符 and 拥有更高优先级,会先行运算。优先级顺序为 NOT、AND、OR。 2、列表 1)列表拼接 l1 [1,2,3] l2 [4,5,6]# 方法1 # l1 l1 l2# 方法2 # l1[len(l1):len(l1)] l2# 方法3 l1.extend(l2) print(l1) 3、函数 1)范…...
若依生成主子表
一、准备工作 确保你已经部署了若依框架,并且熟悉基本的开发环境配置。同时,理解数据库表结构对于生成代码至关重要。 主子表代码结构如下(字表中要有一个对应主表ID的字段作为外键,如下图的customer_id) -- ------…...
dotnet4.0编译问题
因为最近在写cobaltstrike的execute-assembly内存加载的c#项目 用visual studio2022编译,最低net只能用6.0版本的,并且execute-assembly不支持 我想使用4.x版本进行编译,因为visual studio不支持,那么使用命令行进行编译 因为要用…...
研一奖学金计划2024/9/23有感
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、需要认真上课的1.应用数理统计(开卷考试)2.最优化方法(开卷考试)3.跨文化交际(主题演讲20课堂讨…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...
BLEU评分:机器翻译质量评估的黄金标准
BLEU评分:机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域,衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标,自2002年由IBM的Kishore Papineni等人提出以来,…...
