今天在做项目的的时候发现创建的el–form表单内单个el–input框输入值后点回车会导致页面刷新的问题,于是好奇心驱使下去查了vue中的form表单内的单input框也会跳转页面也就是页面刷新的问题。查了下
原因:elementUI中的当el–form表单只存在一个el–input框时,会触发表单的默认提交事件,element也给出了解释
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
<el-form :model="form" ref="form" label-width="200px" class="form">
<el-form-item
label="姓名"
prop="name"
>
<el-input v-model.number="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit('form')">提交</el-button>
<el-button @click="reset('form')">重置</el-button>
</el-form-item>
</el-form>
解决方法:element也给出了解决方法
如果希望阻止这一默认行为,可以在
<el-form>
标签上添加@submit.native.prevent
。 :::
<el-form
:model="form"
ref="form"
label-width="200px"
class="form"
@submit.native.prevent
>
<el-form-item
label="姓名"
prop="name"
>
<el-input v-model.number="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit('form')">提交</el-button>
<el-button @click="reset('form')">重置</el-button>
</el-form-item>
</el-form>
官方给出的只是阻止了这一默认行为。当需要回车来提交表单时可以通过下面这种操作来进行解决
<el-form
:model="form"
ref="form"
label-width="200px"
class="form"
@submit.native.prevent="() => submit('form')"
>
<el-form-item
label="姓名"
prop="name"
>
<el-input v-model.number="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">提交</el-button>
<el-button @click="reset('form')">重置</el-button>
</el-form-item>
</el-form>
//注意事项
el-form 方式 确保使用 @submit.native.prevent 阻止原生事件,执行方法为搜索按钮按click事件
[确保方法调用不丢参数]
搜索按钮 - 确保被包裹在 el-form 中
搜索按钮 - 确保按钮的click事件去除掉
搜索按钮 - 确保增加 native-type="submit" 属性
注意事项:那elementUI的解决了, 原生的form表单的单input和form包裹el-input回车刷新的问题也一样可以解决
1.在form表单内再增加一个隐藏的input框
<form>
<input type="hidden" value="1"></input>
</form>
<form>
<input type="text" style="display:none"></input>
</form>
2.去掉输入框的回车事件(根据需求来定,有的需要回车事件提交表单来查询或者执行其他操作则该方法不适用)
<form>
<input type="text" onkeydown="ClearSubmit(e)"></input>
</form>
<script>
function ClearSubmit(e) {
if (e.keyCode == ) {
return false;
}
}
</script>
3.阻止表单默认提交事件(下面例子是以form表单包裹el-input,解决 el-form中el-input回车页面刷新的问题 原生form内的input可用onsubmit句柄返回false来解决)
<form @submit.prevent="() => getList()">
<el-input V-model="inputValue">
</el-input>
<el-button type="primary" native-type="submit"> {{"提交"}} </el-button>
<el-button @click="reset">{{ $t(重置') }}</el-button>
</form>
结语:给一个elementui的官方解决这个回车刷新页面的方案开源地址吧,如果有用点个赞啥的
地址:https://github.com/ElemeFE/element/blob/a0e82aa8ac58d68e66992a5632b779a901436879/examples/docs/zh-CN/form.md
原文地址:https://blog.csdn.net/GG_Zdd/article/details/129883238
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_7119.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!