美文网首页
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