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