Vue Element UI 实现模糊搜索 - 使用 el-input 组件

要实现模糊搜索，可以通过添加一个监听器来监听输入框的输入事件，然后在事件处理函数中通过调用某个搜索接口来获取匹配的结果。具体步骤如下：

1. 添加一个输入框组件 el-input，并指定一个 v-model 来绑定输入框的值。

2. 在输入框组件上添加一个 @input 监听器，该监听器会在每次用户输入内容时被调用。

3. 在监听器函数中，调用搜索接口，并将用户输入的值作为参数传递给接口。

4. 接收到搜索接口返回的结果后，将结果展示在页面上。

下面是一个示例代码：

<template>
  <div>
    <el-input v-model='searchText' placeholder='请输入搜索内容' @input='handleInput'></el-input>
    <ul>
      <li v-for='item in searchResult' :key='item.id'>{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      searchResult: []
    }
  },
  methods: {
    handleInput() {
      // 调用搜索接口，并传递用户输入的值作为参数
      this.$axios.get('/search', { params: { q: this.searchText } })
        .then(res => {
          // 接收到搜索结果后更新 searchResult
          this.searchResult = res.data.result
        })
    }
  }
}
</script>

上面的示例中，搜索接口的 URL 为 /search，查询参数为 q，表示搜索的关键词。在输入框组件中，我们使用了 @input 监听器来监听输入事件，每次用户输入时都会调用 handleInput 方法。在 handleInput 方法中，我们通过 this.$axios.get 方法调用搜索接口，并传递用户输入的值作为参数。接收到搜索结果后，我们将结果更新到 searchResult 数组中，从而实现了模糊搜索的功能。