当前位置：首页 > news >正文

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

news 来源：原创 2024/9/21 12:45:30

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

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