表单中的输入框回车就自动提交

最新推荐文章于 2025-04-30 09:57:22 发布

诺小D

最新推荐文章于 2025-04-30 09:57:22 发布

阅读量520

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_46352558/article/details/130692061

版权

文章介绍了在Vue项目中遇到的表单提交问题，通过使用@submit.native.prevent修饰符来阻止表单默认行为，实现查询与重置功能。示例代码展示了如何创建一个包含搜索输入框和操作按钮的内联表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<section class="page-query-form">
            <breadcrumb :hasLine="true" />
            <el-form :inline="true"  @submit.native.prevent>
                <el-form-item label="标题名称">
                    <el-input size="small" v-model="searchForm.title"  placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-search" class="button submit" @click="handleQuerySubmit()"> 查询 </el-button>
                    <el-button size="small" plain icon="el-icon-refresh-left" class="button reset" @click="handleQueryReset()"> 重置 </el-button>
                </el-form-item>
            </el-form>
        </section>