Element UI输入框focus()方法自动获取焦点失败处理方法

Element UI输入框focus()方法自动获取焦点失败处理方法

​ 本来想通过自定义事件触发输入框，并获取焦点，但是使用官方提示的focus()方法一直失效

后来百度了半天，终于找到一个比较好的处理方法。

​

先放对比代码：

• 刚开始的代码

<el-input
    v-if="isFormOpened"
    v-model="scope.row.name"
    @blur="updateLib">
</el-input>

<el-button 
    type="primary"
    @click="openUpdateForm">
</el-button>


//触发方法
openUpdateForm(){
            this.isFormOpened = true
            this.$refs.inputRef.focus()
        },

• 后来修改后的代码

<el-input
    v-if="isFormOpened"
    v-model="scope.row.name"
    ref="inputRef"
    @blur="updateLib(scope.row.id,scope.row.name)">
</el-input>

<el-button 
    type="primary"
    @click="openUpdateForm(scope.row.name)">
</el-button>


//触发方法
openUpdateForm(){
            this.isFormOpened = true
            setTimeout(()=>{
                this.$refs.inputRef.focus()
            },0)
        },

完美解决

总结：

百度查了半天，终于找到了原因

• 问题原因：渲染组件需要时间，并且时间没有JS执行的快；所以获取不到

• 解决办法：

  • 第一种利用setTimeout ,也就是我上面使用的方法

   setTimeout(()=>{
     this.$refs.input1.focus();
  },0)
  

  • 第二种：利用 this.$nextTick （Dom更新完毕再执行回调函数）

  this.$nextTick(()=>{
      this.$refs.input1.focus();
  })
  

PS：转载请标明出处！