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

本文链接：https://blog.youkuaiyun.com/TD_FAlmK/article/details/132974510

文章讲述了在ElementUI表格中使用v-show切换编辑态时，回车键触发焦点移动的问题。作者发现ElementUI可能对某些操作有限制，通过改用原生DOM解决了焦点问题，强调了基础HTML、JS和CSS的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、先说需求

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

b.表格可以在浏览态和编辑态切换，用v-show来实现的编辑和浏览

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

页面显示代码：

<el-table-column label="产量" prop="ptCn" width="110px" header-align="center" align="center">
    <template slot-scope="scope">
        <div v-show="scope.row.edit">
            <el-input :ref="'ptCn' + scope.row.index" v-model="scope.row.ptCn" @keyup.enter.native="inputFocus('ptCn', scope.row.index)"></el-input>
        </div>
        <div v-show="!scope.row.edit">
            {{ scope.row.ptCn }}
        </div>
    </template>
</el-table-column>

methods方法：

    // 回车点击事件
    inputFocus(flag, index) {
      const nextRow = flag + (++index)

      console.log("refs = ");
      console.log(this.$refs);
      console.log("nextRow = ");
      console.log(this.$refs[nextRow]);

      console.log("光标定位前。。。");
      this.$refs[nextRow].focus();
      console.log("光标定位后。。。");
    },

3、页面效果

如图，当在第一行 9999 处敲击回车之后，控制台打印出了this.$refs的所有组件，也打印了定位前和定位后的log日志，且没有报错，说明我们的代码是正确执行了的，但是光标没有变，还是在第一行。

4、百度了以下几个原因，但是改了之后依旧是不管用

Element UI输入框focus()方法自动获取焦点失败处理方法_element focus_冒泡_L的博客-优快云博客

Vue Element UI input输入框focus()无法获取焦点_vue使用v-show隐藏input框后不再能聚焦_ALL700的博客-优快云博客

Element UI输入框focus()方法自动获取焦点失败处理方法 - 行业资讯 - 电子产品设计开发与电子技术学习交流！

vue element popover input focus() 不生效解决办法 | 码农家园

5、分析原因

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

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

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

<el-table-column label="产量" prop="ptCn" width="110px" header-align="center" align="center">
    <template slot-scope="scope">
        <div v-show="scope.row.edit">
            <!-- 仅仅是将这里的 ref 改为了 id -->
            <el-input :id="'ptCn' + scope.row.index" v-model="scope.row.ptCn" @keyup.enter.native="inputFocus('ptCn', scope.row.index)"></el-input>
        </div>
        <div v-show="!scope.row.edit">
            {{ scope.row.ptCn }}
        </div>
    </template>
</el-table-column>

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

    // 回车点击事件
    inputFocus(flag, index) {
      const nextRow = flag + (++index)

      console.log("nextRow = ");
      console.log(document.getElementById(nextRow));

      console.log("光标定位前。。。");
      document.getElementById(nextRow).focus();
      console.log("光标定位后。。。");
    },

页面效果：（在第一行的 9999 处敲击回车键，此时能正常跳转到第二行的 27447 处）