element中实现el-input实现回车查询遇到的坑

2020-11-09  本文已影响0人  Xbbing

如下
<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就可以实现我们想要的功能了

上一篇下一篇

猜你喜欢

热点阅读