【解决vue中表单回车事件会刷新页面问题】

lyce_liu

已于 2023-08-02 22:19:04 修改

阅读量2.2k

点赞数 6

文章标签： vue.js 前端 javascript

于 2023-08-02 22:08:07 首次发布

本文链接：https://blog.csdn.net/weixin_47102346/article/details/132072001

版权

问题：

当vue的搜索框form表单有且只有一个输入框时，点击回车，我们要的效果是带着输入框的value值去查询列表，但实际上会触发刷新整个页面，想让页面不刷新,可使用 @submit.native.prevent 原始提交事件。

解决方法

需要在form标签加上 @submit.native.prevent原始提交事件：

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

element-ui:

        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="120px"
          @submit.native.prevent
        >
          <el-form-item label="项编号" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入项名称关键字"
              clearable
              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>

iview-ui:

	<Form
        ref="form"
        :model="formData"
        inline
        :label-width="100"
        @submit.native.prevent
        @keyup.enter.native="search"
      >
        <FormItem label="流程编号">
          <Input type="text" v-model="formData.workflowNo"></Input>
        </FormItem>
        <FormItem :label-width="16">
          <Button type="primary" @click="search">查询</Button>
          <Button
            v-if="tabsName != 'solved' && hasCreatePower"
            type="primary"
            @click="toCreat"
            style="margin-left: 15px"
          >
          创建
          </Button>
        </FormItem>
    </Form>