在使用 Element UI 的 el-form 组件时,如果表单中只有一个输入框,并且绑定了回车触发的事件,但按下回车时页面会刷新而不是执行预期的事件函数,这通常是因为表单的默认提交行为导致的。要解决这个问题,你可以按照以下步骤操作: 1. 确定 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原因 是因为当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...
vue+element ui el-form 阻止表单输入框按回车刷新页面 表单只有一个元素的时候,回车会触发页面刷新,加上下面这个属性可以解决这个问题 1 @submit.native.prevent 给某个el-input添加回车键监听 1 @keyup.enter.native="onSearch" <el-form :model="filters"@submit.native.prevent> <el-form-item> <el-input...
当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 ...
表单中只有一个输入框的时回车会页面整体刷新,并在url上面多出一个问号; 在el-form上面加上@submit.native.prevent; 原因分析: form 元素中只有一个输入框时,在该输入框中按下回车默认是提交该表单。我们需要阻止这一默认行为。 <el-form ref="DepartmentForm" :model="DepartmentForm" :rules="DepartmentFormRu...
原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新。 代码语言:javascript 复制 <el-form:inline="true":model="getForm"class="demo-form-inline"><el-form-item label="科目名称"><el-input v-model.trim="getForm.exam_name"@keyup.enter.native="search"></el-input...
先以html为例,el-input雷同(el-input在最后～) 1、场景 如果form表单中,只要有一个可输入的输入框,输入内容后回车(enter键)会默认提交整个表单(...
首先，可以在el-form表单组件上添加`@submit.native.prevent`事件监听器。这样，当表单被提交时，Vue会阻止页面的默认刷新行为，同时允许你自定义提交逻辑。这样一来，当用户按下回车键提交表单时，你可以在Vue组件中捕获该事件，并根据需要执行相应的操作，而无需担心页面刷新。其次，采用另一种策略是通过...
在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一个特性。 1、问题描述及触发条件: 当el-form 中 有且只存在一个input时,在这个input中回车会触发默认提交事件,可能会改变网址,导致在地址中的参数发生改变造成报错。