el-input绑定点击回车事件意外触发页面刷新

小伙伴们在项目中应该还是比较常用键盘指定按键事件的，尤其是一些筛选条件的通过点击键盘回车按键去触发搜索

例如：

<el-form>
	<el-form-item label='条件title'>
		<el-input v-model='formData.searchKey' @keydown.enter='search'></el-input>
	</el-form-item>
	......
</el-form>

产生的问题：

按下回车按键，会触发search方法，但也会造成页面刷新，由于我在页面中并不是每次都能碰到这种情况，以为是偶发性的，后面在弹窗中做了一个表单进行条件筛选，其中e-input还是使用的回车搜索，但每次搜索时都进行页面刷新，造成弹窗关闭，才意识到这种情况不是偶发性的

造成的原因是：

绑定keydown.enter事件到el-input组件中，如果这个输入框在表单中，默认情况下按下回车键会提交该表单，因此，我们在进行回车搜索时，不仅触发了该el-input自定义的搜索事件还触发了el-form的submit也就是表单的提交事件

解决方法

为了解决此方法，我们只需要在该事件上使用.prevent修饰符，.prevent修饰符可以阻止事件的默认事件，因此使用该修饰符可以阻止el-input点击回车触发的submit事件

代码如下：

<el-input v-model='formData.searchKey' @keydown.enter.prevent='search'></el-input>