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

使用上下键进行完工数量这一列的切换

html 复制代码
<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>
js 复制代码
//键盘触发事件
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();
    }
  }
}
相关推荐
梵得儿SHI8 分钟前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
八月ouc22 分钟前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
苏琢玉25 分钟前
从 Hexo 到 Astro:重构我的个人博客
前端·hexo
Glommer28 分钟前
某音 Js 逆向思路
javascript·逆向
街尾杂货店&32 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈34 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
金梦人生1 小时前
Css性能优化
前端·css
Holin_浩霖1 小时前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖1 小时前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇1 小时前
CSS属性继承与特殊值
前端·css