vue-element ui改编input实现模糊查询

在Vue中使用element-ui的Input组件实现模糊查询，你可以通过v-model绑定输入框的值，并监听输入框的change事件，在事件处理函数中调用接口进行查询操作。另外，你可以使用element-ui的Autocomplete组件来实现带有下拉提示的模糊查询效果。

示例代码如下：

<template>
  <div>
    <el-input v-model="keyword" @change="handleSearch" placeholder="请输入关键字"></el-input>
    <el-autocomplete v-model="selectedValue" :fetch-suggestions="querySearch" placeholder="请输入关键字" @select="handleSelect">
      <template slot-scope="{ item }">{{ item }}</template>
    </el-autocomplete>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      selectedValue: '',
      suggestions: []
    };
  },
  methods: {
    handleSearch() {
      // 调用接口进行查询操作，将查询结果更新到suggestions数组中
      // 示例代码中直接使用了一个固定的suggestions数组作为演示，请根据实际需求进行修改
      this.suggestions = ['结果1', '结果2', '结果3'];
    },
    querySearch(queryString, cb) {
      // 在这里可以根据输入的queryString调用接口获取匹配的结果，并通过cb回调函数返回给Autocomplete组件
      // 示例代码中直接使用了一个固定的suggestions数组作为演示，请根据实际需求进行修改
      const results = queryString ? this.suggestions.filter(item => item.includes(queryString)) : this.suggestions;      cb(results);
    },
    handleSelect(item) {
      // 处理选中某个下拉项的逻辑
      console.log('选中的项：', item);
    }
  }
};
</script>