当前位置: 首页 > 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;这…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...