elementui模糊查询

ElementUI提供了一个自动完成组件(el-autocomplete)，可以用于模糊查询。下面是一个简单的例子：

<template>
  <el-autocomplete
    placeholder="请输入搜索故障名称"
    v-model="inputValue"
    :fetch-suggestions="querySearch"
    :trigger-on-focus="false"
    @select="handleSelect"
    prefix-icon="el-icon-search"
    class="input-with-select"
  ></el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      options: ['选项1', '选项2', '选项3', '选项4', '选项5'],
    };
  },
  methods: {
    querySearch(queryString, cb) {
      let results = queryString ? this.options.filter(this.createFilter(queryString)) : this.options;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (option) => {
        return option.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
      };
    },
    handleSelect(item) {
      console.log(item);
    },
  },
};
</script>

在这个例子中，我们使用了el-autocomplete组件，并传入了一些属性和方法：

- placeholder：输入框的占位符。
- v-model：绑定输入框的值。
- fetch-suggestions：查询建议的方法。
- trigger-on-focus：是否在输入框聚焦时触发查询建议的方法。
- @select：选中建议项时触发的方法。
- prefix-icon：输入框前缀图标。
- class：自定义样式。

在methods中，我们定义了querySearch方法，用于查询建议列表。这个方法接收两个参数：queryString和cb。queryString是输入框的值，cb是一个回调函数，用于返回建议列表的数据。在这个方法中，我们使用了filter方法过滤出符合条件的建议项，并调用cb返回建议列表的数据。

我们还定义了createFilter方法，用于创建一个过滤函数，用于过滤建议项。这个方法接收一个queryString参数，返回一个过滤函数。在这个方法中，我们使用了toLowerCase方法将queryString和option都转换为小写字母，并使用indexOf方法判断option是否包含queryString。

最后，我们定义了handleSelect方法，用于处理选中建议项的逻辑。这个方法接收一个item参数，表示选中的建议项。