Element UI输入框focus()方法自动获取焦点失败处理方法_element 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()
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 后来修改后的代码

<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)
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

完美解决

总结：

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

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

• 解决办法：

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

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

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

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

PS：转载请标明出处！