1原因 是因为当form表单中只有一个input时,按下回车建会自动触发页面的提交功能, 所以会产生刷新页面的行为 解决方案: <el-form :model="queryData"ref='queryData'status-icon @submit.native.prevent> <el-form-item label="菜单"label-width="100px"prop="menuName"> <el-inputtype="text"v-model="que...
当el-form表单内只有一个el-input输入框,且type为text类型时,在输入框内按回车会触发表单的提交事件,这可能导致页面刷新。 当el-form表单内有多个el-input输入框时,按回车不会执行任何操作。 处理方法: 阻止表单提交:可以在el-form标签上使用@submit.native.prevent来阻止表单的默认提交行为,从而避免页面刷新。
el-input回车会自动刷新页面原因及解决方法 问题原因: form表单中只有一个输入框的时候,在输入框中按下回车就是提交该表单并且会自动刷新页面。知道原因就好解决了。 解决方法: 在<el-form>上加上@submit.native.prevent来阻止原始提交事件,就是阻止默认刷新页面,但回车事件依旧会触发。<el-form @submit.native.pre...
当el-form 里边只有一个el-form-item的时候,输入内容回车刷新整个页面。 代码语言:javascript 复制 <el-form:model="queryParams"ref="queryRef"><el-form-item label="文章类型"prop="typeName"><el-input v-model="queryParams.typeName"placeholder="请输入文章类型名称"clearable @keyup.enter="handleQuery"/...
原因分析:当表单只有一个文本框时,按下回车将会触发表单的提交事件, 导致页面的刷新。 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....
查阅资料后得知,当 el-form 表单里只有一个 el-input 时,按下回车建会自动触发页面提交功能,因此导致了页面的刷新。 解决方法 ———方法1——— 在表单中新增一个元素,使其不显示,目的在于不让 el-input 变成唯一,这样就不会引起刷新。 <el-form:model...
先以html为例,el-input雷同(el-input在最后～) 1、场景 如果form表单中,只要有一个可输入的输入框,输入内容后回车(enter键)会默认提交整个表单(浏览器默认行为)。 网上说表单中只有一个输入框时回车才会触发表单提交,但是我试了输入框+按钮、输入框+多选、输入框+隐藏域,只要在输入框中回车就会提交整个表单,但...
当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...
当表单中只有一个input,按回车默认是执行提交表单事件,如果是两个input不会出现这个问题。那如何解决呢?在el-form上加@submit.native.prevent阻止默认事件。如果需要回车查询数据,给el-input加@keyup.enter.native="queryInfo"属性,其中queryInfo是查询数据的函数。 <el-form ref="form" :model="form" size="mini...
原因分析:当表单只有一个文本框时,按下回车将会触发表单的提交事件, 导致页面的刷新。 1:el-input上使用回车事件 <el-inputv-model="input"@keyup.enter.native="search1"> 解决方法一:在el-form表单加上@submit.native.prevent <el-form@submit.native.prevent><el-inputv-model="input"@keyup.enter.nati...