### 如何在 EL 表单中实现
回车键触发
查询功能
要在基于 Element UI 的 `el-form` 中实现通过按下
回车键来触发
查询的功能，可以按照以下方法进行配置和编写代码。
#### 方法一：阻止默认行为并绑定事件
如果表单中只有一个输入框，在按下
回车键时会触发浏览器的默认提交操作，从而导致页面刷新。为了避免这种情况，可以在 `<el-form>` 上添加 `@submit.native.prevent` 属性以阻止默认提交行为，并手动绑定按键监听器到输入框上[^2]。
以下是具体实现：
```html
<template>
<div>
<el-form :inline="true" @submit.native.prevent>
<el-form-item label="关键词">
<el-input v-model="searchKeyword" placeholder="请输入关键字..." @keyup.
enter.native="handleSearch"></el-input>
</el-form-item>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
searchKeyword: '', // 存储输入框中的值
};
},
methods: {
handleSearch() {
const keyword = this.searchKeyword.trim();
if (!keyword) {
console.warn('请输入有效的搜索关键词');
return;
}
// 调用后端接口或者执行前端过滤逻辑
this.performSearch(keyword);
},
performSearch(keyword) {
// 假设这里是调用 API 或者本地数据筛选的操作
console.log(`正在搜索关键词 "${keyword}"`);
// 可在此处替换为实际业务逻辑
},
},
};
</script>
```
上述代码的关键在于：
- 使用了 `@submit.native.prevent` 来防止表单的默认提交行为。
- 绑定了 `@keyup.
enter.native` 到输入框上，当用户按下
回车键时会自动调用指定的方法 `handleSearch()`。
---
#### 方法二：利用
Vue 的修饰符 `.native`
对于更复杂的场景（例如嵌套组件的情况），可以直接使用
Vue 提供的原生事件修饰符 `.native` 将键盘事件绑定至父级容器。这种方式适用于需要统一管理多个子组件事件的情形[^3]。
示例代码如下：
```html
<template>
<div class="search-container" @keydown.
enter="on
EnterKey">
<el-form :model="formData" ref="formRef" inline>
<el-form-item prop="name">
<el-input v-model="formData.name" placeholder="请输入名称..."></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-search" @click="handleSubmit">
查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
},
};
},
methods: {
on
EnterKey(event) {
event.preventDefault(); // 阻止默认行为
this.handleSubmit();
},
handleSubmit() {
const queryParam = this.formData.name.trim();
if (queryParam === '') {
console.error('请输入有效参数');
return;
}
// 执行具体的
查询逻辑
console.info(`当前
查询条件为 ${queryParam}`);
},
},
};
</script>
```
此方案的特点是将全局范围内的
Enter 键事件捕获起来，并交由特定函数处理。它特别适合于多层嵌套结构下的交互需求。
---
#### 注意事项
1. 如果表单中有多个输入框，则通常不会因为某个单独字段的内容变化而导致全页重载；但如果确实发生了异常情况，请检查是否存在未加修饰符的 `<form>` 标签或其他潜在冲突源。
2. 对于大型项目而言，建议优先采用前后端分离架构设计模式——即尽可能减少客户端侧的数据加载压力，转而依赖服务端完成复杂运算任务。
---
扫一扫
7784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
