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賦值