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

ops/2024/11/14 22:00:49/

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

<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();}}
}

http://www.ppmy.cn/ops/111400.html

相关文章

德之匠信息化阶段模型

今天适逢仲秋佳节&#xff0c;祝大家幸福安康&#xff01; 春生、夏长、秋天也是我们作为知识工作者最开心的季节。经历了项目实践、课题研究&#xff0c;终于能思有一得&#xff0c;是世上第一等的好事。 这个题目的背景是这样。近期我们在做一批中长期信息化项目的分析和总…

什么是485无线通信

在现代通信技术中&#xff0c;无线模块扮演着至关重要的角色&#xff0c;它们使得设备能够在没有物理连接的情况下进行数据交换。485通讯无线模块是这类无线模块中的一种&#xff0c;专门用于实现RS-485通信协议的无线传输。RS-485是一种广泛应用于工业自动化和远程监控系统的串…

Chrome 本地调试webrtc 获取IP是xxx.local

浏览器输入 chrome://flags/#enable-webrtc-hide-local-ips-with-mdns并将属性改为disabled修改成功后重启浏览器并刷新网页即可

基于Spark框架实现XGBoost模型

基于Spark框架实现XGBoost模型 原生的Spark MLlib并不支持XGBoost算法&#xff0c;但XGBoost4J-Spark提供了一种解决方案&#xff0c;使得我们可以在Spark环境中调用XGBoost。XGBoost4J-Spark是一个项目&#xff0c;旨在无缝集成XGBoost和Apache Spark&#xff0c;通过适配XGB…

面试题总结(三) -- 内存管理篇

面试题总结(三) – 内存管理篇 文章目录 面试题总结(三) -- 内存管理篇<1> C 中堆内存和栈内存的区别是什么&#xff1f;<2> 如何在 C 中手动管理内存&#xff08;new/delete 操作符&#xff09;&#xff1f;<3> C 中内存泄漏的原因和避免方法<4> 谈谈…

JVM字节码

JVM字节码详解 引言 JVM&#xff08;Java Virtual Machine&#xff0c;Java虚拟机&#xff09;字节码是一种中间代码&#xff0c;主要用于Java平台上的程序在不同硬件平台上的移植。Java程序通过编译器将源代码编译成字节码&#xff0c;然后通过JVM解释或即时编译&#xff08…

Superset二次开发之服务器环境准备

本方案选择Vmware虚拟机,可选择云服务器 一.安装Vmware虚拟机 注: 配置: 4c8G100G 二.安装python 3.10 环境 1.安装依赖项: sudo yum groupinstall "Development Tools" sudo yum install gcc openssl-devel bzip2-devel libffi-devel zlib-devel 2.下载 Python …

python做游戏好用吗

Python做游戏是完全可以的&#xff0c;而且也非常简单&#xff0c;有一个专门针对游戏开发的平台&#xff08;模块&#xff09;—pygame&#xff0c;允许开发人员快速设计游戏而又摆脱了低级语言的束缚&#xff0c;下面我简单介绍一下这个模块的安装和使用&#xff1a; 1、首先…