Element UI 中el-input 框回车触发页面刷新问题及解决

10月前作者：lee_uncle 分类：Toy博客阅读(57) 违法举报

这篇具有很好参考价值的文章主要介绍了Element UI 中el-input 框回车触发页面刷新问题及解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题描述

当el-input 获取焦点后按到回车按钮会刷新当前页面

 <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
	<el-form-item label="关键字">
		<el-input v-model.trim="queryParams.keyword" placeholder="请输入" clearable></el-input>
	</el-form-item>
	<el-form-item class="el-btn-box">
		<el-button class="el-btn-search" type="primary" icon="custom-icon-search" size="mini" @click="handleQuery" :loading="loading">查询</el-button>
	</el-form-item>
</el-form>

问题解决

在el-form标签增加表单事件@submit.native.prevent,防止搜索框回车键刷新整个页面文章来源地址https://www.toymoban.com/news/detail-706489.html

 <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
	<el-form-item label="关键字">
		<el-input v-model.trim="queryParams.keyword" placeholder="请输入" clearable></el-input>
	</el-form-item>
	<el-form-item class="el-btn-box">
		<el-button class="el-btn-search" type="primary" icon="custom-icon-search" size="mini" @click="handleQuery" :loading="loading">查询</el-button>
	</el-form-item>
</el-form>

到了这里，关于Element UI 中el-input 框回车触发页面刷新问题及解决的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

Element-UI中el-form内部在输入框回车导致刷新页面的问题解决。

当 el-form 表单里面只有一个 el-input 输入框的时候，在输入框选中时按回车会刷新页面：默认情况下， el-form 中只有一个输入框时， el-form 会自动为输入框添加一个 type=\\\"submit\\\" 的按钮，当按下回车键时，该按钮会触发表单的提交事件。在el-form标签内加入 @submit.native.prevent 即可

2024年02月11日
浏览(59)
element-ui ：封装el-input 遇到的问题

因项目中有多处输入框要求只能输入整数或者浮点数， el-input 设置type=number 火狐浏览器这个属性是无效的；所以就想到了使用el-input type=text 输入的时候正则匹配，只能输入整数或者浮点数; 所以为了方便使用，需要对第三方库el-input 进行封装。 1. 初始封装的组件Number-in

2024年02月03日
浏览(59)
Element UI el-input 只能输入大于0的正整数

当输入值以0开头或者不为0-9的整数时，则用\\\' \\\'替换掉（/g表示全局匹配，则所有匹配项都会被替换掉），效果为不能输入以0开头或不为正整数的值。

2024年02月14日
浏览(61)
如何给 el-input 添加键盘回车事件

查找 Element UI 的 input输入框组件（el-input组件），都没有发现可以给输入框添加的回车键监听事件，因为Element UI对其做了进一步封装，想要直接添加 @keydown（或者@keyup.enter）是无效的。要想在el-input中实现回车键监听事件，需要在@keyup.enter后面加上.native，即那么 .native 是如

2024年02月16日
浏览(60)
Element UI 中 el-input 标签去掉边框的一种办法

最近在做一个简单的页面，想把 el-input 去掉边框，在网上找了很多方法，最终发现下边这种方法是可行的： HTML代码：样式代码如下：注意这里的样式语言用的是 less，其深度穿透写法是 /deep/。由此便可去除 el-input 的外边框。

2024年02月16日
浏览(46)
element ui el-input输入框type=number去掉上下箭头

使用vue框架写法如果是input标签type=number，将上述css代码中 ::v-deep 去掉即可

2024年02月12日
浏览(59)
解决：element ui表格表头自定义输入框单元格el-input不能输入问题

表格表头如图所示，有 40-45，45-50 数据，且以输入框形式呈现，现想修改其数据或点击右侧加号增加新数据编辑。结果不能输入，部分代码如下我看在这一块 template 中不需要用到 scope 去获取数据，于是没有加上 slot-scope=\\\"scope\\\" 结果不能输入，解决方法就是在表头自定义时将

2024年02月03日
浏览(61)
vue3和ts的el-input的键盘回车绑定事件

el-input框绑定键盘回车搜索事件加上@keyup.enter.native=\\\"search\\\" 然后第二种方法：作用在input元素身上在html中然后

2024年02月04日
浏览(46)
Element-UI实现的下拉搜索树组件(el-select、el-input、el-tree组合使用)

1、子组件封装注意使用：正常使用 // 子组件使用父组件调用

2024年02月11日
浏览(87)
解决使用element ui时el-input的属性type=number，仍然可以输入e的问题。

使用element ui时el-input的属性type=number，仍然可以输入e，其他的中文特殊字符都不可以输入，但是只有e是可以输入的，原因是e也输入作为科学计数法的时候，e是可以被判定为数字的，但是有些场景是需要把e这种情况屏蔽掉的，我们可以使用如下的方法。在进行键盘事件输入

2024年02月08日
浏览(46)