@色少2年前
08/21
22:23
当在 el-input 输入框内按回车时，如果该输入框位于 el-form 表单的第一个，就会触发表单的提交事件。而当 el-form 表单内有多个 el-input 输入框时，其他输入框的回车操作不会执行任何操作。
可以通过在 el-form 标签上使用 @submit.native.prevent 注解来解决这个问题。该注解表示对一个组件绑定系统原生事件，并阻止默认事件（如 form 的 submit 事件默认提交会刷新页面，.prevent 修饰符可以阻止该默认事件）。
上码：
1 2 3 4 5 | <el-form :model="query" ref="Form" :inline="true" @submit.native.prevent> <el-form-item label="名称" prop="title"> <el-input v-model="queryParams.title" clearable placeholder="请输入"/> </el-form-item> </el-form> |
通过添加 @submit.native.prevent 注解，可以阻止表单提交时刷新页面的默认行为，从而避免在第一个 el-input 输入框内按回车时触发表单提交事件的问题。
.native 表示对一个组件绑定系统原生事件
.prevent 表示阻止默认事件（如form的submit事件默认提交会刷新页面，.prevent修饰符可以阻止该默认事件）