使用背景
使用Element-UI的下拉框功能，实现远程搜索和懒加载功能。
结果演示视频
el-select下拉远程搜索+懒加载
实现内容
- 下拉内容是懒加载的，滚动到底调用接口获取数据，分页每次默认加载10条
- 可以从远程模糊搜索
代码主要逻辑
HTML代码
- 可以远程搜索：增加remote属性、remote-method自定义远程搜索方法
- 可以懒加载：增加自定义指令v-el-select-loadmore=“loadmore”
JS代码
- 定义变量
- 自定义指令：判断当下拉框的滚动条执行到最底下的时候调用接口获取下一页
- 自定义指令内容：滚动到底的时候调用接口获取下一页数据
- 远程搜索：根据输入内容远程搜索数据库内容
- 正常懒加载接口调用：初始化获取下拉内容
tips
- 加载的时候默认每次显示10条数据
- 删除远程搜索最后一个字符内容的时候，会重置懒加载，从第一页开始加载
- 正常懒加载调用接口的时候，先判断有没有远程搜索内容，有内容才搜索；返回值要判断哪一次返回值内容是[ ]，则表示是最后一页了，再往下滚动也不用调用接口了，避免重复调用接口
实现代码
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('', '物料代码不能为空')">
<el-select v-model="" v-el-select-loadmore="loadmore" :remote-method="remoteMethod" :loading="loading" clearable filterable remote placeholder="请选择物料代码">
<el-option v-for="item in materialOption" :key="" :label="" :value=""></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>