el-autocomplete 多选输入逗号隔开每次隔开 重新推荐 调用后端接口

研究半天 大概功能实现了 高级的input 输入框 测bug去了 当后端开发，研究前端的时候 折磨

组件模块

  <el-autocomplete
                  class="inline-input"
                  :fetch-suggestions="queryOptions"
                  placeholder="请输入"
                  style="width: 180px"
                  :debounce="0"
                  @select="clickSelect"
                  v-model="xxxx"
 ></el-autocomplete>

方法实现

    //响应提示
    async queryOptions(queryString, cb) {
      console.log("queryString:",queryString)
      let options = [];
      //查询后端相关数据
      await xxx(this.xxx).then((res) => {
        //赋值
        this.xxx= res.data;
      });
      //将结果中的gsmc提取出来
      for (let i = 0; i < this.xxxx.length; i++) {
        //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
        options.push({ "value": this.xxx[i].storeCode});

      }

      let changeQueryString  = this.segmentation(queryString,[",","，","。","\n"]);

      //过滤结果
      const results = changeQueryString ? options.filter(this.filterOptions(changeQueryString)): options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if(queryString!=null){
        results.map((item,index)=>{
          results[index].msg = item.value !== changeQueryString ? queryString.slice(0,queryString.lastIndexOf(changeQueryString)) + item.value : queryString
        });
      }

      //回调结果
      cb(results);

    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    segmentation(queryString,arr){
      if(queryString!=null){
        arr.map(item =>{
          queryString = queryString.slice(queryString.lastIndexOf(item)+1)
        });
      }

      return queryString
    },
    //点击方法
    clickSelect(msg) {
      console.log("msg",msg)
      if(msg.msg==undefined){
        this.listQuery.storeCode=msg.value;
      }else {
        this.listQuery.storeCode=msg.msg;
      }
    },