element ui Select带输入查询下拉菜单，滚动加载更多数据，公用组件双向绑定

实现的效果只是一个下拉菜单，但是由于后台的数据量非常庞大，单次全部返回会有很长的时间损耗，故而想到了模糊查询加懒加载的形式去实现。

而由于定义的是公用组件，且只是一个变量，多人协同开发的时候我就想到了使用类似v-model的方式去进行双向数据绑定，这样的话使用我这个组件的人就不用过多定义接收事件和变量，即引即用，非常方便。

下拉触底会触发 loadmore 事件 ，输入内容并回车会执行 searchCompany 事件。

以下是引用组件部分，不要忘了引入这个组件

<SearchCompany v-model="searchForm.copNo" ></SearchCompany> 

searchForm.copNo 是你父组件的变量

以下是组件部分，代码复制可用

<template>
    <div id="companySearch">
        <el-select v-model="visible" class="elSelectCom" placeholder="请选择" size="mini" v-el-select-loadmore="loadmore">
                    <div class="InputSearch" style="">
                        <el-input size="mini" style="width:180px;height:28px" clearable v-model="userInput" @keyup.enter.native="searchCompany()" prefix-icon="el-input__icon el-icon-search"></el-input>
                    </div>
                    <br>
                    <br>
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    </el-option>
        </el-select>
    </div>
</template>
<script>
export default {
    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();
          }
        });
      }
    }
  },
  props:{
      value:{
        type: String,
        default:""
      }
  },
    name:'companySearch',
    data(){
        return{
            options:[{
            value: '选项1',
            label: '黄金糕'
            },{
            value: '选项2',
            label: '黄金糕'
            },{
            value: '选项3',
            label: '黄金糕'
            },{
            value: '选项4',
            label: '黄金糕'
            },{
            value: '选项5',
            label: '黄金糕'
            },{
            value: '选项6',
            label: '黄金糕'
            },{
            value: '选项7',
            label: '黄金糕'
            },{
            value: '选项8',
            label: '黄金糕'
            },{
            value: '选项9',
            label: '黄金糕'
            },{
            value: '选项10',
            label: '黄金糕'
            }],
            visible:'',
            userInput:'',
        }
    },
    watch:{
        value(val) {
            this.visible = val;
        },
        visible(val){
            this.$emit("input",val);
        }
    },
    methods: {
        searchCompany(){
            console.log(245)
        },
        loadmore() {
            console.log(123)
        }
    },
}
</script>
<style lang="scss">
    .elSelectCom{
        position: relative;
    }
    .InputSearch{
            position: absolute;
            top: 0px;
            left: 0;
            padding-top: 10px;
            width:100%;
            display:flex;
            justify-content: center;
            background: #fff;
            z-index: 9999;
            height: 38px;
            >.el-input{
                line-height: 28px;
            }
        }
</style>