element中实现el-input实现回车查询遇到的坑
如下 :
<el-form size="mini" inline>
<el-form-item label="test">
<el-input
v-model="searchForm.hotWord"
maxlength="100"
placeholder="请输入关键词查询"
@change="_searchClick">
</el-input>
</el-form-item>
</el-form>
_searchClick(){
...这是查询逻辑 此处省略...
}
我们会发现当我们按回车的时候 回先进行查询 然后会整个刷新页面
原因:el-form中如果就只有一个el-input 就会出现这个问题 这是el-form中的一个坑
解决方案:
<el-form size="mini" inline @submit.native.prevent>
<el-form-item label="test">
<el-input
v-model="searchForm.hotWord"
maxlength="100"
placeholder="请输入关键词查询"
@change="_searchClick">
</el-input>
</el-form-item>
</el-form>
我们只需要在el-form上加上@submit.native.prevent就可以实现我们想要的功能了