vue+element实现Select 选择器的远程搜索、滚动加载

1、html结构：

<el-select
	v-model.trim="query.enEnterpriseBaseId"
	v-loadmore="loadMore"
	clearable
	filterable
	placeholder="企业名称"
	@visible-change="getEnterpriseName"
	style="margin-right:8px;width:230px"
	remote
	:remote-method="remoteMethod">
	<el-option
		v-for="item in enterpriseOptions"
		:label="item.name"
		:key="item.id"
		:value="item.id">
		<span :title="item.name">{{ item.name }}</span>
	</el-option>
</el-select>

2、script标签内data的定义：

data () {
	return {
		query: {      
			enEnterpriseBaseId: "",             // 企业名称
			page: 1,
			pageSize: 20,
		},
		enterpriseOptions:[],                   // 企业名称下拉选项
		pageSearch: 1,                          // 企业名称远程搜索页数
		serachValue: "",                        // 企业名称远程搜索输入内容
	};
},

3、method内定义方法：

//获取企业名称
getEnterpriseName () {
	var query = {
		page: 1,
		pageSize: 20,
	}
	this.axios.post(enterpriseNameUrl, query).then((res) => {
		if (res && res.data.data) {
			this.enterpriseOptions = res.data.data.list;
		}
	});
},

// 下拉加载企业列表
loadMore () {
	this.pageSearch++;
	var query = {
		page: this.pageSearch,
		pageSize: 20,
		name: this.serachValue,
	};
	this.axios.post(enterpriseNameUrl, query).then((res) => {
		if (res && res.data.data) {
			res.data.data.list.map((item) => {
				this.enterpriseOptions.push(item);
			});
		}
	});
},

// 远程搜索企业列表
remoteMethod (inputValue) {
	this.pageSearch = 1;
	this.serachValue = inputValue;
	var query = {
		page: 1,
		pageSize: 20,
		name: inputValue,
	};
	this.axios.post(enterpriseNameUrl, query).then((res) => {
		if (res && res.data.data) {
			this.enterpriseOptions = res.data.data.list;
		}
	});
},

4、增加自定义指令，在入口文件处引用

import Vue from 'vue'
/**
 * 自定义指令
 */
let MyPlugin = {}
export default MyPlugin.install= function(vue, options) {
    Vue.directive('loadmore', {
        bind (el, binding) {
          // 获取element-ui定义好的scroll盒子
          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()
            }
          })
        }
    })
}