1.接到需求是点击键盘上下键,控制输入框移动方便输入数据
2.相关实现代码
javascript"><el-table-column label="档距(m)" prop="span" width="120" align="center">
<template slot-scope="scope">
<el-input size="mini" placeholder="请填写值"
:value="scope.row.span"
@input="handlerNumberChange($event,scope.row)"
@click.native="handleNative"
/>
</template>
</el-table-column>
//==============
handleNative(){
const len = this.list.length ;
document.onkeydown = (v)=>{
if (document.activeElement.nodeName.toLocaleLowerCase() !== "input") {
return document.onkeydown = null;
}
let curel = document.activeElement ; //文档中当前获得焦点的元素
while(curel.nodeName.toLocaleLowerCase() !== "td" && curel.nodeName.toLocaleLowerCase() !== "body") {
curel = curel.parentElement
}
if (curel.nodeName.toLocaleLowerCase() === "body") {
return document.onkeydown = null;
}
const curcellIndex = curel.cellIndex; // 当前元素列单元格索引
// 当前所在table(this.list) 的行的index : sectionRowIndex
let index = curel.parentElement.sectionRowIndex ;
let curtbody = curel.parentElement; //当前tbody内容的整个表单
while(curtbody.nodeName.toLocaleLowerCase() !== "tbody") {
curtbody = curtbody.parentElement
}
const rowItem = i => curtbody.children[i].children[curcellIndex] ;
// 13 enter| 40 下 | 38 上
let flag = false;
if (v.keyCode === 40 || v.keyCode === 38) {
flag = true
this.oldInputNode = rowItem(index).getElementsByTagName('input')[0];
this.oldRow = this.list[index] ;
}
if (v.keyCode === 40) {
index += 1;
if (index === len) { index = 0 }
}
if (v.keyCode === 38) {
index -= 1
if (index < 0 ) { index = len - 1 }
}
if (flag) {
const inputNode = rowItem(index).getElementsByTagName('input')[0] ;
if (inputNode.dataset.disabled) {
this.oldInputNode && this.oldInputNode.blur()
}else{
inputNode.focus() ;
}
this.$refs.table.setCurrentRow(this.list[index]) ;
}
}
},
参考:https://www.cnblogs.com/Tohold/p/9559092.html