今天在做后台管理系统时，需要用到select组件的远程搜索功能：

element-ui官网上是有相应的远程搜索的功能的：

具体思路就是：select组件支持输入功能，在输入关键字后，触发remote-method方法，然后根据关键字调取接口，获取数据，然后再展示到下拉框中。

官网上给出的是多选的select组件，经过单选和多选组件的对比，发现，多选的组件完全没有问题。

针对上面的三点，多选时，都可以满足，都可以触发remote-method远程搜索功能。

但是在单选时，就出现了问题：上图中拿到关键字的三种方式中，第三种：鼠标去点击“山东”二字是无法触发remote-method远程搜索方法的。触发不了这个方法，也就无法根据关键字调取相关的数据。上面gif动图中，第一次触发单选框是通过鼠标点击“山东”，此时并没有触发remote-method远程搜索方法，进而无法获取下拉框中的数据。第二次是回车拿到的"山东"二字，此时是可以触发remote-method远程搜索方法的。

经过测试发现：如果通过鼠标点击选择的文字，可以在有光标的同时，直接按回车，此时就会触发远程搜索功能了。

鼠标选中的文案，可以通过回车触发远程搜索功能

如果不希望用这种方式，想要实现：鼠标点击关键字后，直接进行搜索，则需要自行封装：

自行封装的select单选组件

1.html部分的代码

<div style="display:flex;align-items:center;margin-left:-110px;" @click.stop>
    <div class="el-form-label"><span>*</span>供应商名称</div>
    <div class="supplierCls">
        <el-input size="mini" placeholder="请选择供应商名称" v-model="supplierName" clearable @input="supplierInput" @blur="supplierBlur" @focus="focus" @clear="clearSupplier"></el-input>
        <div class="el-form-content" v-if="supplierOptionsShow">
            <div v-for="item in supplierOptions" :key="item.id" @click.stop="selectItem(item)" :class="complaintRecordForm.supplierId==item.id?'el-form-selectItem':''">{{item.name}}</div>
        </div>
    </div>
    <div class="tips" v-if="supplierOptionsShowTips">请选择供应商</div>
</div>

select组件的输入功能：通过input组件来实现
select组件的下拉框：通过一个div标签来实现

2.js部分的代码

变量部分

data(){
	return{
		supplierName:null, //输入框中的值
        supplierOptions: [], //下拉框中展示的数据
        supplierOptionsShow: false, //是否展示下拉框
        supplierOptionsShowTips:false, //是否展示必填提示信息
        supplierTimer:null,//防抖的定时器变量
	}
}

监听输入框的输入事件：input：防抖监听输入内容，调取接口

 supplierInput(val) {
    clearTimeout(this.supplierTimer);
    this.supplierTimer = setTimeout(() => {
        if (val) {
            this.supplierName = val;
            this.getSupplierOption(val);
        } else {
            this.supplierName = val;
            this.supplierOptions = [];
            this.complaintRecordForm.supplierId = null;
            this.supplierOptionsShow = false;
            this.supplierOptionsShowTips = true;
        }
    }, 200)
},

输入框光标失去焦点时，下拉框内容隐藏，判断是否要提示必填信息

supplierBlur() {
   if (!this.complaintRecordForm.supplierId) {
        this.supplierOptionsShowTips = true;
        this.supplierName = null;
    } else {
        this.supplierOptionsShowTips = false;
    }
},

输入框获取焦点后，根据下拉框是否有数据判断是否要展示下拉框

focus() {
    if (this.supplierOptions && this.supplierOptions.length) {
        this.supplierOptionsShow = true;
    }
},

清空输入框后，要隐藏下拉框，清除下拉框数据等操作

clearSupplier() {
   this.supplierOptions = [];
   this.supplierOptionsShow = false;
   this.supplierBlur();
},

点击下拉框中的某一项内容后，给对应内容赋值，并隐藏下拉框

selectItem(item) {
    this.supplierName = item.name;
    this.complaintRecordForm.supplierId = item.id;
    this.supplierOptionsShow = false;
    this.supplierBlur();
},

3.css部分代码

.supplierCls {
    position: relative;
    width: 180px;
}
.el-form-content {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    border: 1px solid #DCDFE6;
    border-radius: 6px;
    z-index: 10;
    background: #fff;
    padding: 6px 8px;
    box-sizing: border-box;
    max-height: 150px;
    overflow: auto;
}
.el-form-content > div {
    cursor:pointer;
}
.el-form-selectItem {
    color: #f90;
    font-weight: bold;
}
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: transparent;
}
.el-form-label {
    width: 110px;
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight:bold;
}
.el-form-label > span {
    color:red;
    margin-right:4px;
}
.tips {
    position: absolute;
    top: 25px;
    font-size: 12px;
    left: 0;
    padding: 0;
    color: red;
}

当然，一个回车就能解决，自己封装一下也可以的。

完成！！！