vue element ui 弹框组件里的el-input如何自动聚焦

2024-03-02 465 阅读1分钟

vue element ui中弹框组件里的el-input如何自动聚焦

打开弹窗时,跟上如下代码。

  this.$nextTick(function(){
       this.$refs['nameFocus'].focus();        
  })

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。
在修改数据之后立即使用它，然后等待 DOM 更新。

补充：如果有表单校验，你会发现，第二次打开表单，校验还在，那么我们在`打开弹框`的时候，清除表单校验即可

this.isNewGroup = true
this.$nextTick(() => {
    this.$refs['newGroupValid'].resetFields() // el-form的ref
    this.$refs['nameFocus'].focus() // el-input的ref
})

重点：this.$nextTick()尽量都要加上，因为有些场景可能dom还没生成好，所以也就不存在focus方法，比如文本控件和表单控件切换的时候