el-autocomplete 模糊搜索示例

el-autocomplete是一个基于Element UI的自动完成组件，可以实现输入框的模糊搜索功能。下面是一个el-autocomplete的模糊搜索示例：

<template>
  <el-autocomplete
    v-model="state.RWMC"
    :fetch-suggestions="rwquerySearch"
    placeholder="关键字匹配"
  />
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      timeout: null,
      RWMC: '',
    });

    //获取输入建议的方法,回调函数返回
    const rwquerySearch = async (queryString, cb) => {
      clearTimeout(state.timeout);
      var results = [];
      if (queryString == '') {
        cb(results);
      } else {
        //掉接口需要的参数
        let find = {
          name: queryString, //上面输入框绑定的数据
        };
        try {
          // 请求后端的接口数据赋值给result
          let result = [
            { id: 1, name: '123' },
            { id: 2, name: '1111' },
          ];
          if (result) {
            //循环放到一个远程搜索需要的数组
            for (let i = 0; i < result.length; i++) {
              const element = result[i];
              results.push({ value: element.name, id: element.id });
            }
            cb(results);
          } else {
            results = [];
            cb(results);
          }
        } catch (error) {
          console.log(error);
        }
      }
    };

    return {
      state,
      rwquerySearch,
    };
  },
};
</script>

在这个示例中，el-autocomplete组件的v-model绑定了state.RWMC，fetch-suggestions绑定了rwquerySearch方法，placeholder设置了输入框的提示信息。rwquerySearch方法是获取输入建议的方法，当输入框中的内容发生变化时，会调用该方法进行模糊搜索。在该方法中，我们可以通过调用后端接口获取搜索结果，并将结果放到一个远程搜索需要的数组中，最后通过回调函数cb返回结果。