在 vue+element ui 中只有一个输入框（el-input）的情况下，回车会提交表单。

最新推荐文章于 2024-06-20 20:06:05 发布

葬爱-魂穿你的心

最新推荐文章于 2024-06-20 20:06:05 发布

阅读量607

点赞数

本文链接：https://blog.youkuaiyun.com/aznsjhb/article/details/105700658

版权

本文介绍在Vue+ElementUI框架下，如何避免el-input组件的回车操作导致页面刷新的问题。通过在el-form上使用@submit.native.prevent事件监听器，可以有效防止默认表单提交行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做任务碰到个问题，就是在el-input按回车会刷新页面，@keyup.enter.native是调用回车事件。

在在 vue+element ui 中只有一个输入框（el-input）的情况下，回车会提交表单。两个以上的话就不会发生这种情况，解决办法也很简单，只需要在el-from加上@submit.native.prevent就可以阻止回车提交表单了

    <Modal title="新建文件夹"
      :visible.sync="folderFormVisible"
      @confirm="submitAddFolderForm"
      >
      <el-form label-width="200px"
       @submit.native.prevent
        size="small">
        <el-form-item label="文件夹名称">
          <el-input v-model="docForm.folderName"
            auto-complete="off"
            @keyup.enter.native="submitAddFolderForm"></el-input>
        </el-form-item>
      </el-form>
    </Modal>片