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

news2024/11/23 12:32:35

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

<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 clearable
       style="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 clearable
       style="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');

  //向上 =38
  if (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();
    }
  }

  //下 = 40
  if (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.coloradmin.cn/o/2124406.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

视频融合共享平台LntonAIServer视频分析平台噪声监测优势

LntonAIServer的视频质量诊断功能中的噪声检测是一项关键技术&#xff0c;旨在帮助用户及时发现并解决视频流中的噪声问题&#xff0c;确保视频监控系统的稳定性和可靠性。 在视频监控系统中&#xff0c;噪声问题常常影响到视频画面的清晰度和可用性。噪声可能由多种因素引起&a…

基于SpringBoot+Vue的考研学习分享互助平台

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的考研学习…

仕考网:省考面试流程介绍,提前了解

省考面试流程介绍&#xff0c;一文带大家了解! 一、面试登记及抽签 考生通常需要提前10至30分钟到达指定地点进行登记。 考试工作人员核对考生身份证和面试通知书等相关证件后&#xff0c;进行抽签确定分组和进场顺序。 二、候考阶段 考生完成抽签后进入候考区等待考试。在…

空气开关跳闸的原因及解决办法

空气开关&#xff08;也称为断路器或空气断路器&#xff09;跳闸通常是因为电路中的某些问题导致的。下面是一些常见的原因及解决办法&#xff1a; 1. 过载 原因&#xff1a;当电路中的电流超过空气开关的额定值时&#xff0c;会导致过载保护动作&#xff0c;使空气开关跳闸。…

银行安全用电典型产品解决方案介绍-安科瑞-叶西平

应用背景 银行作为国家重要部门&#xff0c;是国家经济建设的中枢&#xff0c;也是消防的重点单位。用电安全是银行安全保卫工作 的一个重要环节。银行安保设施、数据中心、自助设施、办公设备等能耗单元对用电的连续性、稳定性和安 全性要求非常高&#xff0c;实时监测线路及…

一文理解单点登录与联合登录

img 如今&#xff0c;许多组织都有大量需要每天进行身份验证的应用程序。用户使用传统意义上的凭据在应用程序进行身份验证时容易遭到社会工程学攻击以及信息泄露风险。 单点登录验证&#xff08;Single Sign-On&#xff09; 单点登录身份验证&#xff0c;无论是内部还是外部…

【LabVIEW学习篇 - 24】:生产者/消费者设计模式

文章目录 生产者/消费者设计模式案例&#xff1a;控制LED等亮灭 生产者/消费者设计模式 生产者/消费者是多线程编程中最基本的一种模式&#xff0c;使用非常普遍。从软件角度看&#xff0c;生产者就是数据的提供方&#xff0c;而消费者就是数据的消费处理方&#xff0c;二者之…

基于51单片机的输液滴速吊瓶控制器proteus仿真

地址&#xff1a; https://pan.baidu.com/s/1fbDdoppvtVdg19H3qI9Vzg 提取码&#xff1a;1234 仿真图&#xff1a; 芯片/模块的特点&#xff1a; AT89C52/AT89C51简介&#xff1a; AT89C52/AT89C51是一款经典的8位单片机&#xff0c;是意法半导体&#xff08;STMicroelectro…

中国信通院:《大模型落地路线图研究报告(2024年)》(附下载)

前言 近日&#xff0c;中国信息通信研究院&#xff08;简称“中国信通院”&#xff09;发布《大模型落地路线图研究报告&#xff08;2024年&#xff09;》。 本报告重点梳理了大模型应用落地遵循的诊断、建设、应用、管理四个重要阶段&#xff0c;归纳总结出能力分析、需求挖…

手撕Python之正则

1.正则和re模块的联系 正则表达式是一种通用的用来简洁表达一组字符串的表达式&#xff0c;利用正则表达式可以方便快捷的匹配和筛选字符串 举个例子&#xff1a;在一堆数据中进行电话号码的寻找&#xff0c;我们需要根据电话号码的特征在这一堆数据进行电话的寻找&#xff0…

Oracle 12c 及以上版本补丁更新说明及下载方法

参考下面的文章&#xff0c;会对补丁更新的流程有一定的了解。 https://www.modb.pro/db/27255 RU&#xff08;Release Updates&#xff09;是每一个季度的版本升级。包括&#xff1a; 最新的BUG修复最新的安全漏洞补丁最新添加的功能 以19c为例&#xff0c;对应的升级版本升…

太全面了,各种3D​模型和资源都开源了

太全面了&#xff0c;各种3D​模型和资源都开源了 想在三维图形世界中畅游&#xff1f;three-cesium-examples 是一个开源的 three.js 和 cesium.js 案例与演示社区&#xff0c;让你轻松掌握这些酷炫的技术&#xff01;本文将带你了解这个仓库的主要内容、特点&#xff0c;并教…

最通俗的语言搞懂”大模型“的来龙去脉

人工智能时代&#xff0c;有很多时髦、相互容易混淆概念的科技名词&#xff1a;AI、Machine Learning、Deep Learning、Generative AI、Large Model&#xff0c;它们指的是同一个概念么&#xff1f;不是的。 AI&#xff08;artificial intelligence人工智能&#xff09;&#x…

如何避免 Java 学习中误用 break 和 continue?

在 Java 编程学习过程中&#xff0c;许多初学者经常会误用 break 和 continue 语句。这种情况不仅影响代码的可读性&#xff0c;还可能导致逻辑错误&#xff0c;从而使程序无法按预期工作。 一、break 和 continue 的基本概念 1.1 break 语句 break 语句在 Java 中用于立即终…

【资料集】软件资料合集整理,软件项目全生命周期各阶段文档

在软件开发过程中&#xff0c;文档扮演着至关重要的角色。它不仅记录了项目的需求、设计和开发过程&#xff0c;还为项目的维护和管理提供了便利。本文将详细介绍软件开发文档的重要性和作用&#xff0c;以及需求分析、软件设计、开发过程、运维管理和项目管理等方面的文档编写…

LabVIEW高效换热器性能试验系统

随着能源和化工行业对换热器性能提出更高要求&#xff0c;开发了一种基于LabVIEW的换热器性能试验装置测控系统的开发&#xff0c;该系统集成了实时测量、分析、调节等功能&#xff0c;能够精确控制和测试换热器的性能&#xff0c;以支持新品开发和改进设计。 项目背景&#xf…

汽车智能座舱展︱2025 广州国际汽车智能座舱及车载显示技术展览会

汽车智能座舱展︱2025 广州国际汽车智能座舱及车载显示技术展览会 China Guangzhou Automotive Smart Cockpit and Dispaly Technology Expo 2025 时间&#xff1a;2025年11月20日-22日 地点&#xff1a;广州保利世贸博览馆 (PWTC Expo) 亚洲领先的汽车智能座舱及车载显示…

Brave编译指南2024 Windows篇:安装Visual Studio 2022(二)

1.引言 在编译Brave浏览器之前&#xff0c;安装和配置合适的开发工具是至关重要的一步。Visual Studio 2022是编译Brave浏览器所需的重要开发环境&#xff0c;它提供了一整套工具和服务&#xff0c;以支持多种编程语言和技术。作为一款功能强大的集成开发环境&#xff08;IDE&…

收银系统源码-商品条码标签/价签打印

对于商超、生鲜、零食等零售行业门店来说&#xff0c;商品价签对门店来说至关重要&#xff0c;既需要操作简单&#xff0c;还要能支持多种方式打印价签。常规需要如何操作呢&#xff1f; 1. 设置好模板 标签模板&#xff1a;支持商品标签和商品价签两种&#xff0c;支持在收银…

用Windows资源管理器解压zip,中文文件夹和文件出现乱码

这个问题是比较简单的&#xff0c;因为你没安装解压软件&#xff0c;随便下载个解压软件就好了&#xff0c;比如winrar、7zip、360zip等等。这几个都是免费的解压软件&#xff0c;注意去官网下载&#xff0c;别下载到假的。 有些人即便用了解压软件但依旧是乱码&#xff0c;网上…