elementui中el-input回车搜索实现示例

你是否遇到过这样的场景：在使用Element UI框架时，想要实现一个模糊查询关联搜索的功能？当用户在输入框输入关键字后，希望能够直接看到所有与关键字关联的数据，而不是仅仅选择一条。今天，我们就来一下如何在Element UI的el-input组件中实现回车搜索功能。

其实，这个问题并不难解决。我们可以给el-input组件绑定一个回车键事件，当用户在输入框按下回车键时，就发送请求获取后台所有关联的数据并展示在页面上。这样，用户就可以根据自己的需求选择感兴趣的数据了。

接下来，让我们看一下具体的实现方式。在HTML部分，我们使用Vue的指令来绑定回车键事件。为了去除用户可能误输入的空格，我们还使用了trim修饰符。

```html

```

在JavaScript部分，我们定义了一个名为search的方法来处理回车键事件。我们会检查输入框的内容是否为空。如果为空，就不去搜索。如果不为空，则带着关键词发送请求获取关联数据并展示在页面上。我们还使用了Vue的watch属性来监听输入框的变化。当输入框内容为空时，我们会发送请求回到初始的数据状态。

```javascript