element表单内输入框使用@keyup enter native回车时会刷新页面
问题：form表单中只有一个文本输入框时，使用@keyup.enter.native会触发表单的自动提交，所有页面会自动刷新
<el-form ref="queryForm" :model="query" class="search-form" label-width="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="query.name" placeholder="名称" @keyup.enter.native="refresh" />
</el-form-item>
</el-form>
1
2
3
4
5
2
3
4
5
方法一：在form表单上添加@submit.native.prevent阻止表单提交的默认事件
<el-form ref="queryForm" :model="query" class="search-form" label-width="80px" @submit.native.prevent>
<el-form-item label="名称" prop="name">
<el-input v-model="query.name" placeholder="名称" @keyup.enter.native="refresh" />
</el-form-item>
</el-form>
1
2
3
4
5
2
3
4
5
方法二：添加一个影藏的文本框
<el-form ref="queryForm" :model="query" class="search-form" label-width="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="query.name" placeholder="名称" @keyup.enter.native="refresh" />
</el-form-item>
<el-form-item label="影藏文本" prop="shadow" v-show="false">
<el-input v-model="query.shadow" placeholder="影藏文本" />
</el-form-item>
</el-form>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
上次更新: 2025/09/05, 8:09:00