Element-ui关于对话框中表单自动获取焦点的实现

最新推荐文章于 2024-05-20 18:02:48 发布

「已注销」

最新推荐文章于 2024-05-20 18:02:48 发布

阅读量5.1k

点赞数 2

分类专栏： Vue学习笔记文章标签： ui vue.js javascript elementui

本文链接：https://blog.csdn.net/love_dzq/article/details/122402570

版权

本文介绍了在Element-ui的对话框中，如何解决表单自动获取焦点的问题。通过结合`this.$nextTick()`和`ref`属性，确保DOM更新后正确聚焦表单。当`autofocus`属性失效时，可以使用组件的实例方法和`$nextTick()`在DOM更新后手动调用`focus()`来聚焦表单。

摘要由CSDN通过智能技术生成

Element-ui关于对话框中表单自动获取焦点的实现

前置知识：

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势，是解决这次问题的关键。

问题背景：在Vue+element-ui项目中，用到了Dialog对话框，嵌套表单完成数据修改提交。当触发对话框时焦点还停留在触发对话框的按钮上并没有转移到对话框中。这个时候就会出现一个问题：当用户没有操作对话框获取对话框焦点时，点击回车提交数据就会重新触发打开对话框事件而并不是提交表单。

解决方法：表单中绑定ref，在触发打开对话框事件中添加nextTick 函数回调focus()方法，自动获取表单焦点。

<!-- 新增修改对话框 -->
      <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false"
        width="500px"  >
        <el-form ref="form"