el-input上按回车 界面自动刷新/跳转 问题原因分析及解决办法

原因

是因为el-form一个比较智能的判断 如果表单上只有一个输入框 则在输入框上按回车 表单就会自动提交 且刷新界面

老实说 挺奇葩的 这个智能的判断 很多时候都会成为智障 因为大部分人都不需要这个功能 且很多时候会给大家带来问题 这个问题还不容易发现

解决办法就是 在el-form 上加上@submit.native.prevent 防止事件冒泡
参考代码如下

<el-form
  :model="ruleForm"
  ref="ruleForm"
  @submit.native.prevent
>
	<el-form-item label="请输入内容：">    
	          <el-input                                
                  v-model.trim="ruleForm.club_name"
	           >
	          </el-input>                 
	</el-form-item> 
</el-form>