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

这篇具有很好参考价值的文章主要介绍了Vue + el-ui table 内嵌 input 调用 focus 方法无效；this.$refs.xxx.focus()方法无效。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、先说需求

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

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

Vue + el-ui table 内嵌 input 调用 focus 方法无效；this.$refs.xxx.focus()方法无效,vue.js,前端,javascript,elementui,ui

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、页面效果

Vue + el-ui table 内嵌 input 调用 focus 方法无效；this.$refs.xxx.focus()方法无效,vue.js,前端,javascript,elementui,ui

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

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

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

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

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 处）

Vue + el-ui table 内嵌 input 调用 focus 方法无效；this.$refs.xxx.focus()方法无效,vue.js,前端,javascript,elementui,ui