美文网首页
element中实现el-input实现回车查询遇到的坑

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

作者: Xbbing | 来源:发表于2020-11-09 17:20 被阅读0次

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

相关文章

网友评论

      本文标题:element中实现el-input实现回车查询遇到的坑

      本文链接:https://www.haomeiwen.com/subject/mtfrbktx.html