el-form下单个el-input文本框回车触发提交刷新的问题

问题描述

今天在写一个信息搜索栏时,就是一个简单的 el-dialog 弹窗,里面只有一个 el-form 表单 和一个 el-input 文本框.

当焦点在文本框内时,按下回车键,会触发表单提交并刷新页面.

问题原因

接着翻了下 el-form 文档,有个关于这个问题的特别提示.(只有一个文本框会出现该问题,两个就没有)

下面是更改后的代码:

// el-form添加 @submit.prevent 将不会再出现回车触发提交刷新的问题
<el-form :model="SearchForm" @submit.prevent >
	<el-form-item prop="SearchText">
		<el-input v-model="SearchText" placeholder="物品编号" />
	</el-form-item>
</el-form>

如果需要回车触发特定效果或事件(不通过button按钮),可以用下面这种方法或监听 el-input 的 change() 事件:

<el-form :model="SearchForm" @submit.prevent="() => submit" >
	<el-form-item prop="SearchText">
		<el-input v-model="SearchText" placeholder="物品编号" />
	</el-form-item>
</el-form>

el-input 的 change事件 和 input 事件的区别

另外在歪一下楼.简单说下 el-input 的这两种事件区别,在输入框内分别添加两个事件并进行日志输出.出现的效果如下.