1.html

<el-form-item label="乘车人企业" prop="customerCompanyId">
           <drop-down @getValue="setCustomerCompanyId" :value="submitForm.customerCompanyId" />
</el-form-item>
import dropDown from '@/components/dropDown/drop-down';

2. js

  setCustomerCompanyId(val) {
        //变量
        this.submitForm.customerCompanyId = val;
   }

3. 组件

<template>
<el-select v-model="propValue" class="el-width-st100" clearable filterable @change="changeFn" reserve-keyword
:remote="true" :loading="loading" :remote-method="getSearchCompanyList" v-el-select-loadmore="getCompanyList"
popper-class="selectObj" @visible-change="getCompanyListVisible" >

<el-option   v-for="(item,index) in CompanyList"  :label="item.companyName"  :value="item.companyId"   :key="index"  />

</el-select>
</template>

//说明 1. 先走getCompanyListVisible 2.走getCompanyList
3.滑动时候 走getCompanyList 4.输入时候走getSearchCompanyList 这时需要清除数据 在赋值
export default {
//import引入的组件需要注入到对象中才能使用
name: "drop-down",
props: ["value", "isSpecial"],
data() {
//这里存放数据
return {
propValue: "",
CompanyList: [],
isNull: false,
pageNum: 0,
loading: false,
searchName: "",
selectedObj: {}
};
},
directives: {
"el-select-loadmore": {
bind(el, binding) {
const SELECTWRAP_DOM = el.querySelector( ".el-select-dropdown .el-select-dropdown__wrap" );
SELECTWRAP_DOM.addEventListener("scroll", function() {
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (condition) {
binding.value();
}
});
}
}
},
//监控data中的数据变化
watch: {
value(val) {
this.propValue = val;
}
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
this.selectedObj = {};
this.propValue = this.value;
},
//方法集合
methods: {
getCompanyListVisible(e) {
if (e) {
this.CompanyList = [];
this.pageNum = 0;
this.isNull = false;
this.searchName = "";
}
this.getCompanyList(e);
},

        changeFn(val) {
                for (let i = 0; i < this.CompanyList.length; i++) {
                          let item = this.CompanyList[i];
                          if (item.companyId === val) {
                                        this.selectedObj["companyName"] = item.companyName;
                                        this.selectedObj["companyId"] = item.companyId;
                          }
                 }
                this.$emit("getValue", val);
                this.$emit("getName", this.selectedObj["companyName"]);
          },
        getSearchCompanyList(query) {
                  if (this.pageNum > 0) {
                          this.pageNum = 0;
                  }
                  this.pageNum++;
                  if (query !== "") {
                          this.searchName = query;
                          this.loading = true;
                          let data = {};
                    if (this.isSpecial == 2) {
                                    data = {
                                        companyName: query,
                                        pageNum: this.pageNum,
                                        pageSize: 10,
                                        companyAttribute: 2,
                                        isPermission: true
                                    };
                     } else {
                              data = {
                                      companyName: query,
                                      pageNum: this.pageNum,
                                      pageSize: 10
                                };
                    }

              this.$post(xxx接口, data).then(response => {
              this.CompanyList = [];
              this.loading = false;
              this.CompanyList = response.data;
            });
        } else {
          this.searchName = "";
          this.pageNum = 0;
          this.CompanyList = [];
          this.getCompanyList();
        }
    },

    getCompanyList(e) {
            if (this.isNull || e === false) {
                  return false;
            }
            this.pageNum++;
            let data = {};
            if (this.isSpecial == 2) {
                  data = {
                        companyName: this.searchName,
                        pageNum: this.pageNum,
                        companyStatus: 2,
                        pageSize: 10,
                        companyAttribute: 2,
                        isPermission: true
                    };
               } else {
                    data = {
                            companyName: this.searchName,
                            pageNum: this.pageNum,
                            pageSize: 10
                     };
              }
               this.$post(xxx接口, data).then(response => {
                                if (response.data.length > 0) {
                                               let data = response.data;
                                               let arr = [];
                                               for (let i = 0; i < data.length; i++) {
                                                    if (data[i].companyId && data[i].companyName) {
                                                        arr.push({
                                                              companyId: data[i].companyId,
                                                              companyName: data[i].companyName
                                                          });
                                              }
                                    }
                            this.CompanyList = [...this.CompanyList, ...arr];
                            let isHave = this.CompanyList.find(item => {
                                              return item.companyId === this.selectedObj["companyId"];
                            });
                          if (  !isHave && this.selectedObj["companyName"] &&  this.selectedObj["companyId"] ) {
                                          this.CompanyList.unshift({
                                                companyName: this.selectedObj["companyName"],
                                                companyId: this.selectedObj["companyId"]
                             });
                            } else {
                                      for (let i = 0; i < this.CompanyList.length; i++) {
                                                    let item = this.CompanyList[i];
                                                    if (item.companyId === this.selectedObj["companyId"]) {
                                                                                 this.CompanyList.splice(i, 1);
                                                    }
                                      }
                              }
                          this.isNull = false;
                  } else {
                          this.isNull = true;
                  }
            });
        }
    },

activated() {
this.propValue = ''
} //如果页面有keep-alive缓存功能，这个函数会触发
};