el-input回车-自动刷新页面

小鱼儿心语: 你不得不逼着自己更优秀,因为身后有许多人等着看你的笑话。所以要对自己狠一点,逼自己努力,再过五年你将会感谢今天发狠的自己、恨透今天懒惰自卑的自己。
问题原因:

form表单中只有一个输入框的时候,在输入框中按下回车就是提交该表单并且会自动刷新页面。知道原因就好解决了。

解决方法:

el-form上加上@submit.native.prevent来阻止原始提交事件,就是阻止默认刷新页面,但回车事件依旧会触发。
<el-form @submit.native.prevent>

方法解释:

@submit.native.prevent
submit 顾名思义就是提交
.native 表示对一个组件绑定系统原始事件
.prevent 表示提交以后不刷新页面

  • el-input 绑定键盘enter事件
<el-form :model="queryParams" ref="queryRef" :inline="true" @submit.native.prevent>
    <el-form-item prop="content">
        <el-input
            v-model="queryParams.content"
            placeholder="请输入标准内容"
            clearable
            @keyup.enter="handleQuery"
            @change="handleQuery"
        >
           <template #prepend>标准内容</template>
        </el-input>
    </el-form-item>
</el-form>

在开发中我会不定时的更新一些小功能, 或者是踩过的坑,如果对你有帮助,我会很开心哒~~///(^v^)\~~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容