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

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 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.kler.cn/a/305339.html

相关文章:

  • 大模型训练(2):内存开销
  • Unity + Firebase + GoogleSignIn 导入问题
  • 【Rust自学】11.10. 集成测试
  • 2025年第三届“华数杯”国际赛A题解题思路与代码(Python版)
  • 景联文科技提供高质量多模态数据处理服务,驱动AI新时代
  • Qt常用控件——QSpinBox
  • STM32的寄存器深度解析
  • Mysql的高级查询:SQL关联查询(内连接/外连接/自连接)/子查询
  • uni-app和Node.js使用uni-push2.0实现通知栏消息推送功能
  • Centos挂载和删除nfs
  • python选择排序算法
  • 基于Java+Mysql实现(web)大型企业管理系统
  • API安全测试 | Postman + BurpSuite 配置证书代理
  • chapter14-集合——(List)——day17
  • 828华为云征文|部署在线文件管理器 Spacedrive
  • 大数据-132 - Flink SQL 基本介绍 与 HelloWorld案例
  • 【LLM多模态】CogVideoX文生视频模型结构和训练过程
  • 【openGauss】检查工具gs_check,gs_checkperf的应用
  • Redisson 异步释放锁
  • 什么是485无线通信
  • 磁盘写操作压力测试工具的设计与实现
  • ChatGLM3模型搭建教程
  • OpenCV结构分析与形状描述符(20)计算一个包围给定点集的最小外接圆函数minEnclosingCircle()的使用
  • 研1日记12
  • C++系列-函数对象/仿函数