如下 :
<el-form?size="mini"?inline>?
????????????<el-form-item?label="test">
? ? ? ? ? ? ????<el-input
?????????????????????v-model="searchForm.hotWord"?
? ? ? ? ? ? ? ? ?????maxlength="100"?
? ? ? ? ? ? ? ????? ?placeholder="請(qǐng)輸入關(guān)鍵詞查詢"?
? ? ? ? ? ? ? ????? ?@change="_searchClick">
? ? ? ?????????</el-input>
????????????</el-form-item>
</el-form>
_searchClick(){
? ? ...這是查詢邏輯 此處省略...
}
我們會(huì)發(fā)現(xiàn)當(dāng)我們按回車的時(shí)候 回先進(jìn)行查詢 然后會(huì)整個(gè)刷新頁面?
原因:el-form中如果就只有一個(gè)el-input 就會(huì)出現(xiàn)這個(gè)問題 這是el-form中的一個(gè)坑
解決方案:
<el-form?size="mini"?inline @submit.native.prevent>?
???<el-form-item?label="test">
? ? ? ? ? ? ????<el-input
?????????????????????v-model="searchForm.hotWord"?
? ? ? ? ? ? ? ? ?????maxlength="100"?
? ? ? ? ? ? ? ????? ?placeholder="請(qǐng)輸入關(guān)鍵詞查詢"?
? ? ? ? ? ? ? ????? ?@change="_searchClick">
? ? ? ?????????</el-input>
????????????</el-form-item>
</el-form>
我們只需要在el-form上加上@submit.native.prevent就可以實(shí)現(xiàn)我們想要的功能了