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寻找定位和获取焦点

 

标签：index,vue,RowIndex,refs,key,enter,Input,scope,row
来源： https://www.cnblogs.com/ning-xiaowo/p/16427750.html