elementui回车

ElementUI 回车事件处理

在 ElementUI 中处理回车事件通常涉及表单提交或输入框的键盘监听。以下是常见场景的实现方法：

表单回车提交

为 el-form 添加 @submit.native.prevent 事件，配合 el-input 的 @keyup.enter.native 触发提交：

<el-form @submit.native.prevent="handleSubmit">
  <el-input 
    v-model="inputValue"
    @keyup.enter.native="handleSubmit"
    placeholder="按回车提交">
  </el-input>
</el-form>

独立输入框回车事件

单个 el-input 绑定回车事件时需使用 .native 修饰符：

<el-input
  v-model="searchText"
  @keyup.enter.native="searchMethod"
  placeholder="输入后按回车搜索">
</el-input>

表格筛选回车查询

结合 el-form-item 和 el-input 实现带回车键的筛选功能：

<el-form-item label="关键词">
  <el-input
    v-model="queryParams.keyword"
    clearable
    @keyup.enter.native="getTableData"
    placeholder="回车触发搜索">
  </el-input>
</el-form-item>

注意事项

1. Vue 2.x 中需使用 .native 监听原生事件，Vue 3.x 可省略
2. 阻止默认行为时需调用 event.preventDefault()
3. 组件嵌套较深时可能需要使用 $emit 向上传递事件

回车键防抖优化

高频触发回车事件时可添加防抖处理：

methods: {
  handleSearch: _.debounce(function() {
    this.fetchData();
  }, 500)
}

多输入框回车跳转

实现表单内多个输入框通过回车跳转焦点：

focusNextInput(event) {
  const inputs = Array.from(document.querySelectorAll('input'));
  const index = inputs.indexOf(event.target);
  if (index < inputs.length - 1) {
    inputs[index + 1].focus();
  }
}

以上方法适用于 ElementUI 2.x 版本，Vue 3 组合式 API 需调整事件监听方式。实际使用时需根据具体场景选择合适方案。