element-ui 阻止表单输入框搜索后自动刷新页面

54 阅读 0 评论 36 点赞

我是靠谱客的博主霸气唇彩，最近开发中收集的这篇文章主要介绍element-ui 阻止表单输入框搜索后自动刷新页面，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

问题：

在<el-form></el-form>里面只有一个el-input输入框的情况下，初始加载后点击搜索，会刷新页面。

解决办法：

在<el-form></el-form>标签中添加 @submit.native.prevent

<el-form
   ref='tableForm'
   :model='tableForm'
   @submit.native.prevent
   >
   <el-form-item prop='search'>
     <el-input  ref="searchInput" placeholder='请输入姓名' @keyup.enter.native="searchBtn('tableForm')"  v-model='tableForm.midValue'></el-input>
   </el-form-item>
  </el-form>

在<el-form></el-form>里，有多个输入框时，不会出现此情况

另：
如果想实现回车搜索，在<el-input></el-input>标签上，要添加 @keyup.enter.native 阻止vue默认事件。