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

vue+el-table 可输入表格使用上下键进行input框切换

在这里插入图片描述
使用上下键进行完工数量这一列的切换

<el-table :data="form.detailList" @selection-change="handleChildSelection" ref="bChangeOrderChild" max-height="500"><!-- <el-table-column type="selection" width="50" align="center"/> --><el-table-column label="序号" align="center" prop="index" width="50"/><el-table-column label="产品名称"><template slot-scope="scope"><el-input v-model="scope.row.materialName" readonly/></template></el-table-column><el-table-column label="完工数量" prop="wrastNum"><template slot-scope="scope"><el-input v-model="scope.row.wrastNum" placeholder="请输入完工数量" @focus="wrastNumFocus(scope.row)" @keyup.native="show($event,scope.$index)" class="table_input badY_input"/></template></el-table-column><el-table-column label="入库批次号" prop="productBatchNum"><template slot-scope="scope"><el-input v-model="scope.row.productBatchNum" placeholder="请输入入库批次号" /></template></el-table-column><el-table-column label="开始时间" prop="planStartTime" width="230"><template slot-scope="scope"><el-date-picker clearablestyle="width: 100%;"v-model="scope.row.planStartTime"type="datetime"value-format="yyyy-MM-dd HH:mm:ss"placeholder="请选择开始时间"></el-date-picker></template></el-table-column><el-table-column label="结束时间" prop="planEndTime" width="230"><template slot-scope="scope"><el-date-picker clearablestyle="width: 100%;"v-model="scope.row.planEndTime"type="datetime"value-format="yyyy-MM-dd HH:mm:ss"placeholder="请选择结束时间"></el-date-picker></template></el-table-column><el-table-column label="备注" prop="note"><template slot-scope="scope"><el-input v-model="scope.row.note" placeholder="请输入备注" /></template></el-table-column>
</el-table>
//键盘触发事件
show(ev,index){let newIndex;let inputAll = document.querySelectorAll('.table_input input');//向上 =38if (ev.keyCode == 38) {if( index==0 ) {// 如果是第一行,回到最后一个newIndex = inputAll.length - 1}else if( index == inputAll.length ) {// 如果是最后一行,继续向上newIndex = index - 1}else if( index > 0 && index < inputAll.length ) {// 如果是中间行,继续向上newIndex = index - 1}if (inputAll[newIndex]) {inputAll[newIndex].focus();}}//下 = 40if (ev.keyCode == 40) {if( index==0 ) {// 如果是第一行,继续向下newIndex = index+1}else if( index == inputAll.length-1 ) {// 如果是最后一行,回到第一个newIndex = 0}else if( index > 0 && index < inputAll.length ) {// 如果是中间行,继续向下newIndex = index + 1}if (inputAll[newIndex]) {inputAll[newIndex].focus();}}
}

相关文章:

vue+el-table 可输入表格使用上下键进行input框切换

使用上下键进行完工数量这一列的切换 <el-table :data"form.detailList" selection-change"handleChildSelection" ref"bChangeOrderChild" max-height"500"><!-- <el-table-column type"selection" width&quo…...

中国书法——孙溟㠭浅析碑帖《三希堂法帖》

孙溟㠭浅析碑帖《三希堂法帖》 全称是《三希堂石渠宝笈法帖》&#xff0c;是中国清代宫廷刻帖&#xff0c;一共三十二册。 清朝高宗弘历收藏了晋王羲之《快雪时晴帖》&#xff0c;王献之的《中秋帖》&#xff0c;王珣的《伯远帖》三种王氏原墨迹。故而把所藏法书之所…...

深入探讨生成对抗网络(GANs):颠覆传统的AI创作方式

在人工智能的快速发展中&#xff0c;生成对抗网络&#xff08;Generative Adversarial Networks, GANs&#xff09;无疑是一个引人注目的技术。自2014年由Ian Goodfellow等人首次提出以来&#xff0c;GANs已经在图像生成、文本生成、视频生成等多个领域展现出了惊人的能力。本文…...

vmware Vnet8虚拟网卡丢失的找回问题

vmware Vnet8虚拟网卡丢失的找回问题 1.打开VMware Workstation 2.然后点击Edit --> Virtual Network Edit --> 打开Virtual Network Edit框 &#xff0c; 3.点击最下面的的Restore Default 按钮&#xff0c; 3.恢复默认设置&#xff0c;这会在网络连接那块可以看到丢失…...

Python 从入门到实战13(字符串简介)

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;通过熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 上篇文章我们通过举例学习了流程控制语句中的循环语句。今天继续讨…...

Redis_RDB持久化

基于RDB的持久化方式会把当前内存中所有的redis键值对数据以快照的方式写入硬盘文件中&#xff0c;如果需要恢复数据&#xff0c;就把快照文件读到内存中。 RDB快照文件是经压缩的二进制格式的文件&#xff0c;它的储存路径不仅可以在redis服务器启动前通过配置参数来设置&…...

SOP流程制定:vioovi ECRS工时分析软件的智慧引领

在现代制造业中&#xff0c;标准化操作流程&#xff08;SOP&#xff09;已成为提升生产效率、确保产品质量、降低运营成本的关键要素。SOP不仅为生产活动提供了明确的指导&#xff0c;还促进了企业管理的规范化和精细化。然而&#xff0c;如何科学、高效地制定SOP流程&#xff…...

并发编程-synchronized解决原子性问题

并发编程-synchronized解决原子性问题 文章目录 并发编程-synchronized解决原子性问题零、说在前面一、线程安全问题1.1 什么是线程安全问题1.2 自增运算不是线程安全的1.3 临界区资源与临界区代码段 二、synchronized 关键字的使用2.1 synchronized 关键字作用2.2 synchronize…...

CSS之我不会

非常推荐html-css学习视频&#xff1a;尚硅谷html-css 一、选择器 作用&#xff1a;选择页面上的某一个后者某一类元素 基本选择器 1.标签选择器 格式&#xff1a;标签{} <h1>666</h1><style>h1{css语法} </style>2.类选择器 格式&#xff1a;.类…...

AI绘画:SD打光神器!(Stable Diffusion进阶篇:Imposing Consistent Light)

前言 在上一篇笔记中学习了如何简单地下载以及使用IC-Light&#xff0c;今天的内容会稍微有点不一样。 对于学过stable diffusion的小伙伴来说&#xff0c;forge UI和Comfy UI会更加熟悉一些。在IC-Light发布后&#xff0c;Openpose editor的开发者将其制作成了一个Forge UI上…...

QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第二期]

QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第二期] 第二期介绍&#xff1a;频道模块之频道管理 目录 QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第二期]第二期介绍&#xff1a;频道模块之频道管理获取用户详情获取用户频道列表获取频道详情获取子频道列表获…...

参赛心得和思路分享:2021第二届云原生编程挑战赛2: 实现一个柔性集群调度机制

关联比赛: 2021第二届云原生编程挑战赛2&#xff1a;实现一个柔性集群调度机制 参赛心得 历时快两个月的第二届云原生编程挑战赛结束了&#xff0c;作为第一次参赛的萌新&#xff0c;拿下了28名的成绩&#xff0c;与第一名差了19万分&#xff0c;因为赛制时间太长&#xff0c…...

具体函数的卡诺图填入

目录 用卡诺图表示逻辑函数 基本步骤 例子1 例子2 例子3 用卡诺图表示逻辑函数 基本步骤 例子1 由真值表得卡诺图。 在函数值为1的地方在卡诺图上画上1。 例子2 例子3 非标准与或式&#xff0c;要找到公共部分。 将AB所在的那一行填上1。 将A非D的那个部分也填上1。 再…...

STM32 HAL freertos零基础(六)计数型信号量

1、计数型信号量 计数型信号量(Counting Semaphore)是另一种类型的信号量,它可以保持一个大于等于0的整数值,这个值表示可用资源的数量。本质上相当于队列长度大于1得队列。经典问题就是剩余车辆统计,出入车辆,车辆数据可以实时更新。 2、相关API函数 xSemaphoreCreat…...

Dynamics CRM Ribbon Workbench-the solution contains non-entity components

今天在一个低版本的环境里准备用Ribbon Workbench去编辑一个按钮时&#xff0c;遇到了如下错误 一开始没当回事&#xff0c;以为是我的解决方案问题&#xff0c;去检查了下&#xff0c;只有一个组件&#xff0c;并且哪怕我把组件换成了某个实体也不行&#xff0c;尝试了其他任何…...

谷歌对抗司法部:为什么谷歌的“数百个竞争对手”说法站不住脚

随着谷歌反垄断陪审团审判的进行&#xff0c;谷歌声称美国司法部对广告技术市场的看法狭隘&#xff0c;并且广告商和出版商有很多替代选择。然而&#xff0c;证据并不支持这一说法。 谷歌误导性地声称有“数百个竞争对手。” 虽然存在许多广告技术提供商&#xff0c;但谷歌在…...

重生奇迹MU 沉迷升级的快感 法魔升级机器人

重生奇迹MU是一款以升级为主要玩法的游戏。升级是游戏基础&#xff0c;也是最重要的部分。通过升级&#xff0c;玩家可以获得更多的基础属性奖励和自由点数奖励&#xff0c;同时还能够穿戴最好的装备和翅膀。因此&#xff0c;升级在游戏中具有极其重要的地位。 史上升级最快的…...

从地图到智能地图:空间索引技术如何改变我们的世界

图源&#xff1a;WL 为什么空间索引很有用? 在处理地理空间数据时&#xff0c;空间索引是一个至关重要的功能&#xff0c;它决定了我们如何高效地从海量的地理数据中检索出所需的信息。想象一下&#xff0c;如果你正在处理一个包含数千万乃至数亿条记录的数据库&#xff0c;…...

深入理解AI Agent架构,史上最全解析!赶紧码住!

AI Agent框架&#xff08;LLM Agent&#xff09;&#xff1a;LLM驱动的智能体如何引领行业变革&#xff0c;应用探索与未来展望 1. AI Agent&#xff08;LLM Agent&#xff09;介绍 1.1. 术语 Agent&#xff1a;“代理” 通常是指有意行动的表现。在哲学领域&#xff0c;Agen…...

苹果iOS/ iPadOS18 RC 版、17.7 RC版更新发布

iPhone 16 / Pro 系列新机发布后&#xff0c;苹果一同推出了 iOS 18 和 iPadOS 18 的 RC 版本&#xff0c;iOS 18 RC 的内部版本号为22A3354&#xff0c;本次更新距离上次发布 Beta/RC 间隔 12 天。 在 iOS 18 中&#xff0c;苹果给我们带来了 Apple Intelligence&#xff0c;这…...

VMware虚拟机突然断网?别慌,试试这个NAT模式一键重置法(附主机WiFi适配器设置)

VMware虚拟机断网急救指南&#xff1a;NAT模式重置与主机适配器深度解析 从一次紧急调试说起 深夜11点23分&#xff0c;程序员老张正在虚拟机里调试一个即将上线的微服务接口。突然&#xff0c;git pull命令卡住不动&#xff0c;ping测试显示"Destination Host Unreachabl…...

安卓APP通过JNI调用ATSHA204A加密芯片实战指南

1. 项目概述与核心需求解析 在安卓应用开发领域&#xff0c;尤其是涉及物联网、金融支付、版权保护等高安全要求的场景&#xff0c;单纯依靠软件层面的加密算法已经不足以应对日益复杂的攻击手段。硬件加密芯片&#xff0c;如ATSHA204A&#xff0c;以其物理隔离、密钥不可读取等…...

国产OK镜靠谱品牌怎么选?欧普康视硬核资质与全维度实力详解

导读&#xff1a;当下国民近视问题愈发普遍&#xff0c;大众对安全、高效的非手术视力矫正需求持续攀升。角膜塑形镜&#xff08;OK镜&#xff09;凭借非手术、可逆、日间高清裸眼视力的核心优势&#xff0c;成为青少年近视防控、成年人视力矫正的主流选择。但市面上OK镜品牌繁…...

车规级LGA封装RK3588开发板:硬件设计与车规应用实战解析

1. 项目概述&#xff1a;当“车规级”遇上“LGA封装”的RK3588 最近在嵌入式圈子里&#xff0c;一个消息引起了不小的讨论&#xff1a;深圳市九鼎创展科技推出了一款搭载LGA封装核心板的RK3588开发板&#xff0c;并且主打车规级应用。对于长期在工业控制和边缘计算领域摸爬滚打…...

从卡尔曼滤波到Mamba:状态空间模型(SSM)的‘前世今生’与技术演进图谱

从卡尔曼滤波到Mamba&#xff1a;状态空间模型的技术演进与未来展望 状态空间模型&#xff08;State Space Models, SSM&#xff09;这一概念最早可追溯至20世纪60年代的控制理论领域&#xff0c;如今却在深度学习时代焕发出全新的生命力。当我们谈论Mamba、S4这些突然走红的新…...

哪家网卡公司靠谱必看5大关键清单 企业采购专属版

选网卡公司的3个常见决策误区很多企业采购网卡时踩坑&#xff0c;往往是陷入了三个常见的决策误区。第一个误区是唯价格论&#xff0c;过度压低采购预算&#xff0c;优先选择报价较低的供应商&#xff0c;忽略了产品的授权资质和正品保障&#xff0c;后续容易买到翻新、贴牌的不…...

PSIM与ModelSim的VHDL联合仿真:数字电源控制算法验证利器

1. 项目概述&#xff1a;为什么要在PSIM里搞VHDL联合仿真&#xff1f;做电源硬件或者电力电子控制的朋友&#xff0c;肯定对PSIM不陌生。它是个专门搞电力电子和电机驱动仿真的利器&#xff0c;开关器件模型准&#xff0c;仿真速度快&#xff0c;画起主功率拓扑来那叫一个顺手。…...

Rerank:为什么它是 RAG 效果的分水岭?

在一个典型 RAG 流程中&#xff1a; 很多 Demo 系统会省略中间这一步&#xff1a; 直接把 Top-K 丢给模型 看起来能跑&#xff0c;但一旦进入真实场景&#xff0c;很快就会出现&#xff1a; 命中了&#xff0c;但排在后面噪声太多&#xff0c;污染上下文模型“理解错重点” 本…...

探索罗技鼠标宏:掌握PUBG压枪技术的完整路径

探索罗技鼠标宏&#xff1a;掌握PUBG压枪技术的完整路径 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 在《绝地求生》这款竞技性极强的射击游戏…...

QR码扫描模块全解析:从原理到工程实践

1. 项目概述&#xff1a;不只是“扫一扫”那么简单如果你以为QR码扫描就是个“打开摄像头、对准、识别”的简单功能&#xff0c;那可能错过了它背后一整套精密的技术栈和丰富的应用场景。作为一个在移动应用和嵌入式设备领域折腾了十多年的老码农&#xff0c;我见过太多项目在集…...