vue el-input使用回车键会刷新页面

问题:vue项目中 在输入框输入字符并按下回车键搜索时,不会进行搜索, 而是会刷新页面。

后来发现 只有页面中只有一个input时 才会出现此问题,经查阅得知,是因为当form表单中只有一个input时,按下回车建会自动触发页面的提交功能, 所以会产生刷新页面的行为

解决方法

el-form中加入 

<el-form :inline="true" label-suffix=":" @submit.native.prevent>
      <el-form-item label="用户名">
        <el-input v-model.trim="queryData.username" @keydown.enter.native="fetchData" clearable placeholder="请输入用户名"/>
      </el-form-item>
        ......
</el-form>

@submit: 表单提交
.native 绑定系统原生事件
.prevent 提交以后不刷新页面

posted @ 2021-08-16 11:13  Arbitrary233  阅读(1723)  评论(0编辑  收藏  举报