使用el-autocomplete入的坑

记录背景： 查了很多相关el-autocomplete,感觉都不是自己想要的,于是自己整理了一下el-autocomplete的简单使用

1、写入HTML

        <el-autocomplete
          v-model="queryParams.gsmc"
          class="inline-input"
          :fetch-suggestions="queryOptions"
          placeholder="请输入公司名称"
          style="width: 180px"
          :debounce="0"
        ></el-autocomplete>

2、写入data变量

这个变量是为了请求后台数据的接收变量,因为方法里的局部变量，在回调函数中作用不到(还没试过，但感觉应该是不行)。

      //公司名称提示信息栏
      gsmcOptions: [],

3、写入methods

组件封装了两个参数分别是queryString，和cb
含义：
queryString:表示输入栏中输入的值
cb：表示回调结果，是一个方法对象。一般cb(results)表示向建议栏中回调restls数组结果

详细内容请看代码注释

    //响应提示
    async queryOptions(queryString, cb) {
      let options = [];
      //查询后端相关数据
      await listConfirm(null).then((res) => {
      	//赋值
        this.gsmcOptions = res.rows;
      });
      //将结果中的gsmc提取出来
      for (let i = 0; i < this.gsmcOptions.length; i++) {
      	//添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
        options.push({ "value": this.gsmcOptions[i].gsmc });
      }
      //过滤结果
      const results = queryString
        ? options.filter(this.filterOptions(queryString)): options;
      //回调结果
      cb(results);
    },
    //搜索匹配算法,根据这个算法过滤信息
    filterOptions(queryString) {
      return (options) => {
        return options.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },