在使用 Element UI 的 el-form 组件时,如果表单中只有一个输入框,并且绑定了回车触发的事件,但按下回车时页面会刷新而不是执行预期的事件函数,这通常是因为表单的默认提交行为导致的。要解决这个问题,你可以按照以下步骤操作: 1. 确定 el-form 组件的回车事件处理 确保你已经为输入框绑定了回车事件。通常,你会使...
搞定:el-form el-form-item 下input框回车刷新整个页面 🤞解决el-form el-form-item 下input框回车刷新整个页面🤞 服了呦,终于解决了🛴🛴🛴 🎈出现问题场景 当el-form 里边只有一个el-form-item的时候,输入内容回车刷新整个页面。 代码语言:javascript 复制 <el-form:model="queryParams"ref="queryRef...
当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.n…
el-form表单 input回车刷新页面问题 1原因 是因为当form表单中只有一个input时,按下回车建会自动触发页面的提交功能, 所以会产生刷新页面的行为 解决方案: <el-form :model="queryData"ref='queryData'status-icon @submit.native.prevent> <el-form-item label="菜单"label-width="100px"prop="menuName">...
关于el-form按回车自动刷新页面的问题及解决方案 一、问题背景 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一个特性。 1、问题描述及触发条件: 当el-form 中 有且只存在一个input时,在这个input中回车会触发默认提交事件,...
表单中只有一个输入框的时回车会页面整体刷新,并在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...
1、问题:当页面只有一个输入框时,获取焦点时,点击回车整个页面被刷新了 <el-form:model="Form"label-width="100px"><el-form-itemlabel="名称"><el-inputv-model="Form.name"></el-input></el-form-item></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 ...