在Element UI中,当el-input处于form表单内且表单内只有一个输入框时,按下回车键会默认提交表单。 在Element UI中,el-input组件的回车键行为通常与表单(el-form)的提交行为相关联。当el-input处于el-form表单内,且表单内只有一个输入框时,按下回车键会触发表单的提交事件。这符合W3C标准,即当一个表单中只
解决el-form中el-form-item下input框回车刷新页面问题,只需在el-form标签上添加@submit.native.prevent修饰符,可阻止默认提交行为,避免页面刷新,确保表单数据手动处理,优化用户体验。
原因:当表单只有一个文本框时,按下回车将会触发表单的提交事件, 导致页面的刷新。 解决:加一个隐藏的文本框,即表单不只有一个文本框 <el-form > <el-form-item > <el-input v-model="input"@keyup.enter.native="search1"> </el-form-item> <el-form-item style="margin-bottom:0;display:none;">...
当el-form 里边只有一个el-form-item的时候,输入内容回车刷新整个页面。 <el-form:model="queryParams"ref="queryRef"><el-form-itemlabel="文章类型"prop="typeName"><el-inputv-model="queryParams.typeName"placeholder="请输入文章类型名称"clearable@keyup.enter="handleQuery"/></el-form-item></el-form...
el-input回车会自动刷新页面原因及解决方法 问题原因: form表单中只有一个输入框的时候,在输入框中按下回车就是提交该表单并且会自动刷新页面。知道原因就好解决了。 解决方法: 在<el-form>上加上@submit.native.prevent来阻止原始提交事件,就是阻止默认刷新页面,但回车事件依旧会触发。<el-form @submit.native.pre...
原因分析:当表单只有一个文本框时,按下回车将会触发表单的提交事件, 导致页面的刷新。 1:el-input上使用回车事件 <el-input v-model="input" @keyup.enter.native="search1"> 解决方法一:在el-form表单加上@submit.native.prevent <el-form @submit.native.prevent> <el-input v-model="input" @keyup....
当表单中只有一个input,按回车默认是执行提交表单事件,如果是两个input不会出现这个问题。那如何解决呢?在el-form上加@submit.native.prevent阻止默认事件。如果需要回车查询数据,给el-input加@keyup.enter.native="queryInfo"属性,其中queryInfo是查询数据的函数。 <el-form ref="form" :model="form" size="mini...
而不会触发意外的页面刷新。综上所述，通过在el-form表单上添加`@submit.native.prevent`或通过在表单中包含至少两个输入元素，可以有效解决el-input组件触发回车事件时导致页面刷新的问题。这两种方法都旨在阻止表单的默认提交行为，让开发者能够更好地控制表单提交的时机和逻辑，从而提升应用的用户体验。
<el-input v-model="user.username" placeholder="请输入用户名" autofocus> <in-icon slot="prefix" :name="userIcon"></in-icon> </el-input> </el-form-item> <el-form-item prop="password"> <el-input v-model="user.password" type="password" placeholder="请输入密码"> <in-icon slot="...
当el-form 表单里只有一个 el-input 时,按下回车建会自动触发页面提交功能,因此导致了页面的刷新 解决方法 解决方法1 在表单中新增一个元素,使其不显示,目的在于不让 el-input 变成唯一,这样就不会引起刷新。 <el-form :model="form" ref="form" :inline="true"> ...