vue动态生成Input并在enter之后焦点往下切换
![](https://img2022.cnblogs.com/blog/1867607/202206/1867607-20220630171706565-21784952.png)
简单实现逻辑,在第一个框摁下enter之后切换至下一个输入框,直接上代码
<el-table-column v-for="(item, index) in colList" :width="item.width || 150" :key="item.key" :label="item.label" :fixed="item.fixed"> <template slot-scope="scope"> <div v-if="item.type == 'actions'" > <el-input :key="index" v-model="scope.row.CloneNo" :ref="'RowIndex' + scope.row.$id" @keydown.enter.native="handleKeyDown($event, (scope.row.$id * 1 + 1),scope.row)"> </el-input> </div> <span v-if="item.type == 'string'">{{ scope.row[item.key] == null ? '' : scope.row[item.key] }}</span> <div v-if="item.type == 'img'" > <el-button style="margin-left:10px" type="success" icon="el-icon-check" circle ></el-button> </div> </template> </el-table-column>
handleKeyDown(event, index,row) {
console.log(row)
if (this.$refs["RowIndex" + index] === undefined) {
this.$message.error("本批次已扫描完成,请核对!");
return
}
this.$refs["RowIndex" + index][0].focus();
},
主要的思维就是利用行作为索引。命名,然后再触发事件是用refs寻找定位和获取焦点
等风来,不如追风去。