el-input带搜索

### el-input 组件搜索功能使用方法

在基于 Element UI 的 Vue.js 项目中，`el-input` 组件可以通过监听特定事件来实现回车键触发搜索的功能。这与原生 input 标签有所不同，在 `el-input` 中需绑定相应的事件处理器[^1]。

#### 示例代码

下面展示了一个简单的例子，说明如何配置 `el-input` 来响应用户的键盘操作并执行搜索：

<template>
  <div class="search-container">
    <!-- 定义一个具有 @keyup.enter.native 修饰符的输入框 -->
    <el-input v-model="query" placeholder="请输入查询关键字..." @keyup.enter.native="handleSearch"></el-input>
    
    <!-- 搜索按钮 (可选)，用于点击触发搜索 -->
    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: ''
    };
  },
  
  methods: {
    handleSearch() {
      console.log('正在搜索:', this.query);
      
      // 这里可以放置实际发送请求到服务器获取数据的逻辑
      
      alert(`您要搜索的内容是"${this.query}"`);
    }
  }
};
</script>

此段代码展示了当用户按下回车键时会调用 `handleSearch()` 方法来进行处理的过程。此外还提供了一个按钮作为替代方式让用户能够手动触发展示相同的行为。