el-select 远程搜索+懒加载

使用背景

使用Element-UI的下拉框功能，实现远程搜索和懒加载功能。

结果演示视频

el-select下拉远程搜索+懒加载

实现内容

1. 下拉内容是懒加载的，滚动到底调用接口获取数据，分页每次默认加载10条
2. 可以从远程模糊搜索

代码主要逻辑

HTML代码

1. 可以远程搜索：增加remote属性、remote-method自定义远程搜索方法
2. 可以懒加载：增加自定义指令v-el-select-loadmore=“loadmore”

JS代码

1. 定义变量
2. 自定义指令：判断当下拉框的滚动条执行到最底下的时候调用接口获取下一页
3. 自定义指令内容：滚动到底的时候调用接口获取下一页数据
4. 远程搜索：根据输入内容远程搜索数据库内容
5. 正常懒加载接口调用：初始化获取下拉内容

tips

1. 加载的时候默认每次显示10条数据
2. 删除远程搜索最后一个字符内容的时候，会重置懒加载，从第一页开始加载
3. 正常懒加载调用接口的时候，先判断有没有远程搜索内容，有内容才搜索；返回值要判断哪一次返回值内容是[ ]，则表示是最后一页了，再往下滚动也不用调用接口了，避免重复调用接口

实现代码

HTML部分

增加v-el-select-loadmore=“loadmore” :remote-method=“remoteMethod”

<el-form ref="editForm" :model="editForm" inline label-width="120px">
    <el-form-item label="物料代码：" prop="materialNo" :rules="$everTest('required.blur', '物料代码不能为空')">
        <el-select v-model="editForm.materialNo" v-el-select-loadmore="loadmore" :remote-method="remoteMethod" :loading="loading" clearable filterable remote placeholder="请选择物料代码">
            <el-option v-for="item in materialOption" :key="item.id" :label="item.materialNo" :value="item.materialNo"></el-option>
        </el-select>
    </el-form-item>
</el-form>

JS部分

1. 定义变量

<script>
	data() {
	    return {
          	querys: '',// 远程搜索输入的内容
			selectLoading: false,//select加载
			stopLoading: false,// 最后一次加载之后，不再加载
			pageData: {// 懒加载相关参数，这里代表从第一条数据开始加载，一次加载十项
			    pageNumber: 1,
			    pageSize: 10
			},
      	}
	}
</script>

2. 自定义指令内容

<script>
	// 自定义指令（和method同级）
	directives: {
	    // 下拉框懒加载（el-select-loadmore是自定义的指令，使用时前面加v-）
	    'el-select-loadmore': {
	        // el:使用自定义指令的元素（下拉框），
	        bind(el, binding) {
	            // 下拉框下拉的框
	            const SELECTWRAP_DOM = el.querySelector(
	                '.el-select-dropdown .el-select-dropdown__wrap'
	            );
	            // 增加滚动监听，
	            SELECTWRAP_DOM.addEventListener('scroll', function() {
	                // scrollHeight:当前所有选项的高度
	                // scrollTop:滚动的距离
	                // clientHeight:下拉框的高度
	                const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
	                // 当滚动条滚动到最底下的时候执行接口加载下一页
	                if (condition) {
	                    binding.value();
	                }
	            });
	        }
	    } 
	},
</script>

3. 自定义指令方法

<script>
	// 自定义指令的方法：下拉框滚动到底懒加载
	loadmore() {
	    if (!this.stopLoading) {
	        this.pageData.pageNumber++;// 搜索下一页
	        this.getTypeOption(this.pageData);//调用接口获取下拉框数据
	    }
	},
</script>

4. 远程搜索内容

<script> 
	// 远程搜索物料类别
	remoteMethod(query) {
	    this.querys = querys;// 保存搜索内容
	    let querys = {};
	    // 有内容则搜索
	    if (query !== '') {
	        querys = {
	            pageNumber: 1,
	            pageSize: 10,
	            queryConfig: [{condition: 'like',name: '字段名',value: query}]
	        };
	    } else {
	        // 没有内容搜10
	        querys = {
	            pageNumber: 1,
	            pageSize: 10
	        };
	        // 重置懒加载
	        this.stopLoading = false;
	        this.pageData = {// 懒加载相关参数，这里代表从第一条数据开始加载，一次加载二十项
	            pageNumber: 1,
	            pageSize: 10
	        };
	    }
	    // 调用接口
	    this.selectLoading = true;
	    this.$http.post(this.$qqqqq + 'qq/qqqqq/qqqqqqq', querys)
	        .then(res => {
	            if (res.data.code != 0) {
	                this.$message({ type: 'error', message: '返回提示'});
	                return;
	            }
	            this.typeOption = '返回数据';
	        }).finally(() => {
	            this.selectLoading = false;
	        });
	},
</script>

5. 懒加载搜索

<script> 
	// 获取物料类别下拉内容
	getTypeOption(querys) {
	    if (this.querys != '' && this.querys != undefined) {
	        return;
	    }
	    this.selectLoading = true;
	    this.$http.post(this.$qqqqq+ 'qqqqq/qqqqqqq/qqqqqqqq', querys)
	        .then(res => {
	            if (res.data.code != 0) {
	                this.$message({ type: 'error', message: '返回提示' });
	                return;
	            }
	            // 如果某次返回值是[]，表示已经加载完了，不必再加载
	            if (返回数组.length == 0) {
	                this.stopLoading = true;
	                return;
	            }
	            // 保存数据
	            if (querys.pageNumber == 1) {
	                this.typeOption = 返回数组;
	            } else {
	                this.typeOption = [...this.typeOption, ...返回数组];
	            }
	        }).finally(() => {
	            this.selectLoading = false;
	        });
	},
</script>