Vue、el-table内嵌el-input调用 focus 方法无效；this.$refs.xxx.focus()方法无效

1、需求：

在表格编辑态的时候，可以在①处敲击“回车键”，光标能跳转到②处

2、代码片段（这种方式不生效，失效）

显示页面代码：

<el-table-column label="尺寸厚度x1" align="center" min-width="120" prop="sizeCheckResult" sortable="custom">
  <template slot-scope="scope">
     <el-input v-model="scope.row.sizeCheckResult" :ref="scope.$index + 'sizeCheckResult'"  @keyup.native.enter="focusNextInput('sizeCheckResult2',scope.$index)" placeholder="" class="w_100"></el-input>
  </template>
</el-table-column>

methods方法：

//回车后聚焦另一个输入框
focusNextInput(nextRef,index) {
   var nextInput = index + nextRef;
   this.$refs[nextInput].focus()
}

3、分析原因

试了一下，当不把<el-input>标签放在<el-table>里的时候，比如正常表单（ref不是通过动态赋值）的时候，这段代码是完全没有问题的。所以问题应该是出在了<el-table>上，不知道Element-ui加了什么限制或者Vue的什么bug，导致的代码执行了，但是光标却没有变化

4、改为原生DOM的方式（自测生效）

页面显示代码：（将 ref 改为 id，其他都没变）

<el-table-column label="尺寸厚度x1" align="center" min-width="120" prop="sizeCheckResult" sortable="custom">
  <template slot-scope="scope">
    <el-input v-model="scope.row.sizeCheckResult" :id="scope.$index + 'sizeCheckResult'" @keyup.enter.native="focusNextInput('sizeCheckResult2',scope.$index)" placeholder="" class="w_100"></el-input>
  </template>
</el-table-column>

methods方法：（将this.$refs 改为 document.getElementById）

//回车后聚焦另一个输入框
focusNextInput(nextRef,index) {
  var nextInput = index + nextRef;
  document.getElementById(nextInput).focus();
}

5、总结：

至于为啥this.$refs.xxx.focus() 这个方法不生效，目前还没有研究出来，有知道的大佬欢迎留言在这篇文章的评论区，共勉！