elementUI input输入框监听回车导致页面刷新

原因:当 el-form 表单内只有一个 el-input 输入框时,在输入框内回车就会触发表单的提交事件。
解决办法:在 el-form 上加上 @submit.native.prevent 属性就可以阻止回车提交事件

 <!-- 搜索 -->
    <search-box>
      <template #form>
        <el-form ref="queryForm" :inline="true" @submit.native.prevent>
          <el-form-item label="">
            <el-input  type="text"  v-model="params.keyWord" clearable @keyup.enter.native="search"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #btns>
        <el-button type="warning" icon="el-icon-plus"  @click.native="add">新增</el-button>
      </template>
    </search-box>

猜你喜欢

转载自blog.csdn.net/weixin_44714325/article/details/109067048