vue+element Form鍵盤回車事件頁面刷新解決

問題描述：如下代碼所示，使用element-ui 中的el-form組件對table進行條件查詢，當查詢條件僅有一項時，使用@keyup.enter.native事件綁定回車事件，出現點擊回車后，瀏覽器會刷新頁面的問題；

<el-form :inline="true"  class="demo-form-inline">
    <el-form-item label="基金名稱:" style="margin-bottom:0">
    <el-input placeholder="基金名稱" @keyup.enter.native="doFilter(5)"  v-model="likeName"></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom:0">
    <el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0">查詢</el-button>
    </el-form-item>
 </el-form>

搜索了問題觸發原因，是由於當表單只有一個文本框時，按下回車將會觸發表單的提交事件， 導致頁面的刷新。

解決方案一：加一個隱藏的文本框，即表單不只有一個文本框，如下：

<el-form :inline="true"  class="demo-form-inline" >
    <el-form-item label="基金名稱:" style="margin-bottom:0">
    <el-input placeholder="基金名稱" @keyup.enter.native="doFilter(5)"  v-model="likeName"></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom:0;display:none;">
    <el-input @keyup.enter.native="doFilter(5)"></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom:0">
    <el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0">查詢</el-button>
    </el-form-item>
</el-form>

element官方解決方案：在el-from 加上 @submit.native.prevent

<el-form :inline="true"  class="demo-form-inline"  @submit.native.prevent>
    <el-form-item label="基金名稱:" style="margin-bottom:0">
    <el-input placeholder="基金名稱" @keyup.enter.native="doFilter(5)"  v-model="likeName"></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom:0">
    <el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0">查詢</el-button>
    </el-form-item>
</el-form>

以上兩種方案均可解決。

來源：https://segmentfault.com/a/1190000016034270