解决前端vue项目问题：element避免二次触发的回车来刷新页面

原创已于 2022-09-28 17:59:28 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui #javascript #ecmascript

于 2022-09-09 17:53:18 首次发布

本文介绍了在Vue项目中使用Element UI时，如何防止表单在回车时不必要的刷新页面。通过在el-form组件上添加@submit.prevent修饰符，可以阻止事件的默认行为，确保回车键不会触发页面刷新。示例代码展示了具体实现方法。

回车时element会二次触发不必要的回车刷新页面，需要加阻止事件即可

在el-form里添加@submit.prevent，阻止事件即可

<el-form
      ref="Form"
      :model="form"
      class="form"
      @submit.prevent
    >
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入名称"
          clearable
          v-focus
          @keyup.enter.native="search"
        />
      </el-form-item>
    </el-form>

作者上一篇文章，

解决前端项目场景问题：vue+element进度条el-progress渲染后端动态数据_意初的博客-优快云博客vue+element进度条el-progress渲染后端动态数据。percentage：百分比format：指定文字内容给它们前面加一个：（冒号），进行回调函数。将数据传给el-progress进度条https://blog.youkuaiyun.com/weixin_43928112/article/details/126613981