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

5分钟极速部署!Billion Mail容器化方案助力邮件营销升级 [特殊字符]

5分钟极速部署&#xff01;Billion Mail容器化方案助力邮件营销升级 &#x1f680; 【免费下载链接】BillionMail Billion Mail is a future open-source email marketing platform designed to help businesses and individuals manage their email campaigns with ease 项目…...

基于Python的流浪动物救助平台毕业设计

博主介绍&#xff1a;✌ 专注于Java,python,✌关注✌私信我✌具体的问题&#xff0c;我会尽力帮助你。一、研究目的本研究旨在构建一个基于Python的流浪动物救助平台&#xff0c;以实现流浪动物的有效救助与管理工作。具体研究目的如下&#xff1a; 首先&#xff0c;通过构建流…...

4步实现Obsidian插件全中文显示:从技术原理到实践指南

4步实现Obsidian插件全中文显示&#xff1a;从技术原理到实践指南 【免费下载链接】obsidian-i18n 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-i18n Obsidian作为一款强大的知识管理工具&#xff0c;其生态系统依赖于丰富的第三方插件扩展功能。然而&#…...

GSMA:运营商实践AI大模型赋能垂直行业标杆案例集 2025

这份《运营商实践 AI 大模型赋能垂直行业标杆案例集 2025》由 GSMA 发布&#xff0c;聚焦客户服务与运营创新、医疗健康与智慧教育、产业升级与智能制造、公共服务与社会治理四大领域&#xff0c;系统梳理了中国移动、中国电信、中国联通三大运营商携手生态伙伴&#xff0c;将 …...

在Ubuntu 20.04上搞定OpenFace:一份保姆级安装与避坑指南(含CEN模型和虚拟显示配置)

在Ubuntu 20.04服务器上部署OpenFace的终极实践指南 当你第一次尝试在无图形界面的Ubuntu服务器上部署OpenFace时&#xff0c;是否遇到过那些令人抓狂的报错信息&#xff1f;从缺失的CEN模型到GTK显示问题&#xff0c;每一步都可能成为阻碍你前进的绊脚石。本文将带你穿越这些技…...

避坑指南:ESTUN Editor安装后,TP虚拟示教器bricks.ini配置文件到底在哪?

ESTUN Editor安装后TP虚拟示教器配置文件定位全解析 当你在工业机器人编程中同时安装了ESTUN Editor集成环境和独立TP软件包时&#xff0c;最让人头疼的问题莫过于找不到正确的bricks.ini配置文件。这个问题看似简单&#xff0c;却直接影响着虚拟示教器与机器人控制器的连接稳定…...

为什么你的STM32F103工程编译失败?可能是启动文件没选对!

为什么你的STM32F103工程编译失败&#xff1f;可能是启动文件没选对&#xff01; 在嵌入式开发领域&#xff0c;STM32系列微控制器因其出色的性能和丰富的外设资源而广受欢迎。然而&#xff0c;即使是经验丰富的开发者&#xff0c;在STM32F103项目开发过程中也难免会遇到各种编…...

OpenClaw内存优化:Qwen3-32B-Chat在16G设备运行方案

OpenClaw内存优化&#xff1a;Qwen3-32B-Chat在16G设备运行方案 1. 为什么需要内存优化&#xff1f; 去年冬天&#xff0c;当我第一次尝试在16GB内存的MacBook Pro上运行Qwen3-32B-Chat模型时&#xff0c;系统几乎立即崩溃。这让我意识到&#xff0c;想要在资源有限的设备上运…...

MGeo门址解析应用场景:房产中介平台房源地址自动标准化与GIS热力图生成

MGeo门址解析应用场景&#xff1a;房产中介平台房源地址自动标准化与GIS热力图生成 1. 引言&#xff1a;房产中介的地址之痛 想象一下&#xff0c;你是一家房产中介公司的运营人员。每天&#xff0c;你的同事和合作方会通过各种渠道收集到成百上千条房源信息&#xff1a;有的…...

新手友好:通过快马用自然语言生成你的第一个openclaw卸载脚本

作为一个刚接触编程的新手&#xff0c;想要自己动手写一个软件卸载脚本确实会有点无从下手。最近我在学习Python时&#xff0c;发现用InsCode(快马)平台可以很轻松地通过自然语言描述生成完整代码&#xff0c;特别适合我们这样的初学者。下面我就分享一下如何用这个平台快速创建…...