Element 输入框远程搜索提示

一. HTML

  <el-autocomplete popper-class="my-autocomplete" v-model = "sname"
           :fetch-suggestions="querySearchAsync"
            placeholder="搜索国家，比如意大利"
            @select="handleSelect">
             <template slot-scope="props">
                       <div class="name">
                              <img :src="props.item.avatar"  class="img-rounded" style="width: 25px;height: 25px">&nbsp;
                              {{ props.item.label }}
                        </div>
             </template>
</el-autocomplete>

二. JS

 querySearchAsync(queryString, cb){
            var sr = [];
            if (queryString != undefined && queryString.length > 0){
                axios.post(suggestUrl,{
                    sw:queryString
                }).then(function(response){
                    console.log(response);
                    var r = response.data;
                    if (r.result == 0){
                        console.log(r);

                        var data = r.data;
                        if (data.length > 0){
                            cb(data);
                        }else{
                            cb(data);
                        }
                    }else{
                        cb(sr);
                    }
                });
            }else{
                cb(sr);
            }
},
 handleSelect(item){
        this.sid = item.id;
        this.label = item.label;
  }

三. 服务端

返回对应数据，需要数组