2021-06-15

使用element-ui表单，点击回车查询时，页面重新刷新加载的问题

代码：

        <el-form :model="queryParams" ref="queryForm" label-width="68px">
          <el-form-item label="展示名称" prop="showName">
            <el-input
              v-model="queryParams.showName"
              placeholder="请输入展示名称"
              clearable
              size="mini"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-form>

原因：
当表单中只有一个输入框的时候，按下回车键会触发表单提交事件，从而导致页面刷新

解决方案：
在el-form标签上写入@submit.native.prevent

@submit.native.prevent
.native 表示对一个组件绑定系统原生事件
.prevent 表示提交以后不刷新页面

        <el-form :model="queryParams" ref="queryForm" label-width="68px" @submit.native.prevent>
          <el-form-item label="展示名称" prop="showName">
            <el-input
              v-model="queryParams.showName"
              placeholder="请输入展示名称"
              clearable
              size="mini"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-form>

标签：prevent,06,submit,表单,2021,刷新,15,页面,native
来源： https://blog.csdn.net/zhichaogong/article/details/117922376