ElementUI el-autocomplete可模糊搜索的选择输入框

1. 远程搜索（数据从后端服务器请求获取）

   <!--DOM-->
   <el-autocomplete
       class="inline-input"
       v-model="recipient"
       :fetch-suggestions="queryRec"
       placeholder="请输入收款方(模糊搜)"
       clearable
   ></el-autocomplete>
   

   const vm = new Vue({
       el:'',
       data(){
           return{
             recipient:'', // 当前用户输入后，选中的某一项收款方
           }
       },
       methods:{
           
         queryRec(queryString, cb) {
           let param = [
             {zfield:'USERID',value:queryString}, //当前用户输入的值
             {zfield:'BUKRS',value:this.company}, //选择的公司
             {zfield:'ZDJTYPE',value:'BX'}, //单据类型
           ]
           this.fuzzyQuery(param)
           clearTimeout(this.timeout);this.timeout = setTimeout(() => { 				cb(this.recipientTips);}, 1000 * Math.random());
         },
           
         /**
          * 模糊查询：需要后台进行模糊查询的，都调用此方法，后端会自动返回过滤好的数据
          * @param reqJson 查询条件需要的参数
          */
         fuzzyQuery(reqJson){
           axiosInstance.post("reim/getDateHelp", reqJson, {headers: {'Content-Type': 'application/json'}}).then(res => {
             this.recipientTips = res.data.data.dataHelp.map((item) => {
               return {
                 name: item.VALUE,
                 value: item.VALUE + "|" + item.KEY,
               };
             });
           })
         },
       }
   })
   

2. 静态数据（数据在前端模拟）
   此方法是将数据全部取到前端，然后通过filterable属性过滤若数据较多不建议使用，会增加前端渲染压力，增加性能消耗

   <el-select v-model="company" size="small" filterable placeholder="请选择公司" :popper-append-to-body="false">
     <el-option
       v-for="item in companys"
       :key="item.id"
       :label="item.ZDESC"
       :value="item.ZVALUE">
     </el-option>
   </el-select>
   

    companys: [], // 发送axios请求后给companys赋值