vue element ui input回车刷新页面问题

最新推荐文章于 2024-07-02 15:34:18 发布

奔跑的代码！

最新推荐文章于 2024-07-02 15:34:18 发布

阅读量403

点赞数

分类专栏：前端 vue element ui 文章标签： echarts vue elementui

本文链接：https://blog.csdn.net/zhgweb/article/details/121380310

版权

前端同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

element ui

8 篇文章 0 订阅

订阅专栏

本文解决了一个Vue ElementUI项目中的常见问题：当页面只有一个el-input时，按回车键会触发表单提交并刷新页面。通过在el-form上使用@submit.native.prevent阻止默认行为，并使用@keyup.enter.native捕获回车事件。

摘要由CSDN通过智能技术生成

vue element ui 当页面只有一个 el-input回车刷新页面问题

仅供参考 自我记录.

解决方案① 阻止form的默认事件在form上加上@submit.native.prevent
input回车事件 @keyup.enter.native="configSet('ruleForm')"

  <el-form ref="ruleForm" :model="fuleFrom" @submit.native.prevent>
      <el-form-item label="xxx: " prop="xxx">
      <el-input
                size="small"
                clearable
                placeholder="请输入查询"
                prefix-icon="el-icon-search"
                @keyup.enter.native="configSet('ruleForm')">
            </el-input>

W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。