参考链接：el-select实现远程搜索和懒加载_select 懒加载_qd-hhkj的博客-CSDN博客
自定义懒加载
directives: {
//注意：这个是写到data外面
"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 - Math.ceil(this.scrollTop) <=
this.clientHeight + 1;
if (condition) {
binding.value();
}
});
},
},
}HTML
<el-form-item label="客户列表" prop="contactsId">
<el-select
ref="customerLazy"
v-model="queryParams.contactsId"
remote
clearable
filterable
placeholder="请输入客户编号"
v-el-select-loadmore="lazyLoadingOfCustomerList"
@focus="customerListRemoteMethod"
:remote-method="customerListRemoteMethod"
:loading="customerLoading">
<el-option
v-for="(contact,index) in csContactOptions"
:key="index"
:label="contact.label"
:value="contact.contactsId">
<template slot="default">
<custom-avatar
:avatar="contact.avatar"
:nick-name="contact.nickName"
:contacts-number="contact.contactsNumber"
/>
</template>
</el-option>
</el-select>
</el-form-item>定义变量文章来源：https://www.toymoban.com/news/detail-609258.html
// 是否正在加载中
customerLoading: false,
// 加载开关，加载所有后端数据后控制懒加载是否继续执行，主要防止加载到最后一条数据时，还会继续加载
customerStopLoading: false,
// 客户列表下拉框分页参数
csContactOptions: [],
customerPageData: {
current: 1, //当前页
size: 10, //每页显示条数
}方法文章来源地址https://www.toymoban.com/news/detail-609258.html
/**
* 懒加载客户列表+远程搜索
*/
lazyLoadingOfCustomerList() {
if (!this.customerStopLoading) {
this.customerPageData.current++;// 搜索下一页数据
this.customerListRemoteMethod(this.$refs.customerLazy.query, true); //调用后端接口获取下拉框数据，此时第二个参数必须传 true，懒加载方式调用后端接口函数
}
},
customerListRemoteMethod(query,lazy=false){
// 正在加载中
this.customerLoading = true;
// 获取分页参数
let param = {
pageNum: this.customerPageData.current,
pageSize: this.customerPageData.size,
orderByColumn: "createTime",
isAsc: "desc"
};
// 如果不是懒加载，则是第一次加载，重置分页参数
if(lazy === false){
this.csContactOptions = []
this.customerPageData.current = 1;
this.customerPageData.size = 10;
}
// 是否有搜索条件
if(typeof(query)=='string'){
param.contactsNumber = query;
listContacts(param).then(res => {
if (res.code === 200) {
this.customerLoading = false;
if((Math.floor(res.total/this.customerPageData.current)+1)<1)
{
this.customerStopLoading=true // 设置停止懒加载为true
// 直接停止执行，否则会导致下面请求数据处理添加导致重复数据
return
}
this.csContactOptions = [...this.csContactOptions, ...res.rows];
} else {
this.$message({
message: res.message,
type: "error",
});
}
});
}
else {
// 如果是获取焦点调用本函数（第一次调用），参数val不是字符串，而是对象，此时直接查询第一页数据
let param = {
pageNum: 1,
pageSize: 10,
orderByColumn: "createTime",
isAsc: "desc"
}
// 这里很重要，获取焦点第一次加载时打开懒加载开关，否则一个页面多个懒加载的的话会导致一个懒加载关闭其他都不能懒加载了。
this.customerStopLoading=false
listContacts(param).then(res => {
console.log(res.code)
if (res.code === 200) {
this.customerLoading = false;
if((Math.floor(res.total/10)+1)<1)
{
this.customerStopLoading=true // 设置停止懒加载为true
// 直接停止执行，否则会导致下面请求数据处理添加导致重复数据
return
}
this.csContactOptions = [...this.csContactOptions, ...res.rows];
} else {
this.$message({
message: res.message,
type: "error",
});
}
});
}
},到了这里，关于el-select 远程搜索 懒加载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
