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>
上一篇:spark-submit提交程序遇到错误,纠正记录


下一篇:JavaScript 防抖和节流