解决el-form表单中只有一个输入框时回车会刷新页面的问题

发布于 2024-02-28  410 次阅读


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

<el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" @submit.native.prevent>
      <el-form-item label="题库名称" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入题库名称" clearable size="small" style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>