element的autofocus失效问题解决

最新推荐文章于 2024-02-23 15:00:05 发布

原创最新推荐文章于 2024-02-23 15:00:05 发布 · 1.9w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ref #vue获取dom节点 #autofocus失效

Vue 专栏收录该内容

74 篇文章

订阅专栏

本文介绍在Vue中使用Element UI的el-input组件时，如何解决autofocus属性失效的问题。通过绑定ref属性和使用$refs方法，可以实现输入框的自动聚焦，包括静态和动态绑定ref的两种方法。

原因：
autofocus是vue中input的原生属性,element也支持这种方法,
但是element中的el-input组件外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法来聚集。
方法：

绑定ref
<el-input    ref="myNameId"    v-model="form.name"   />

this.$refs.myNameId.focus();

--------------------------------------------------------------------

动态绑定ref
<el-input    :ref=" 'input'+ form.id "    v-model="form.name"   />

this.$nextTick(()=>{
    let id = 'input'+this.form.id;
    this.$refs[id].focus();
})