遠端搜尋（資料從後端伺服器請求獲取）

<!--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,
            };
          });
        })
      },
    }
})
 

靜態資料（資料在前端模擬）
此方法是將資料全部取到前端，然後通過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賦值