vue动态生成Input并在enter之后焦点往下切换

 

 简单实现逻辑，在第一个框摁下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寻找定位和获取焦点