本文介绍: elinput vmodel=”queryParams.lineNamesize=”smallclearable placeholder=”请输入maxlength=”24″/>当 el-form 表单内只有一个 el-input 输入框时,在输入框内按回车就会触发表单提交事件,而当 el-form 表单内有多个 el-input 输入框时,按回车执行现任何操作

今天测试页面功能时候,突然发现输入框内按enter页面刷新,并且我的vue代码中并没有绑定@keyup.enter.native操作于是我决定对这个前端问题进行分析解决

分析首先看一下我的前端代码,很简单只有一个el-input输入框。

<el-form :model="queryParams" ref="queryForm" :inline="true">
  <el-form-item label="线路名称" prop="lineName">
    <el-input v-model="queryParams.lineName" size="small" clearable placeholder="请输入" maxlength="24"/&gt;
  </el-form-item&gt;
</el-form>

 恰恰就是因为只有这一个输入框,导致了回车新页面,这是el-form特性

原因当 el-form 表单内只有一个 el-input 输入框时,在输入框内按回车就会触发表单提交事件,而当 el-form 表单内有多个 el-input 输入框时,按回车不会执行任何操作。

解决可以使用 @submit.native.prevent来阻止表单提交,把该注解添加到el-form标签上。

 .native 表示一个组件绑定系统原生事件

.prevent 表示阻止默认事件(如formsubmit事件默认提交会刷新页面,.prevent修饰符可以阻止该默认事件)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注