页面部分
<el-select
clearable
remote
v-model="p.orgId"
:remote-method="getOrgByName"
v-el-select-loadmore="selectLoadMoreSnInfo"
filterable>
<el-option v-for="item in orgIdList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
// 创建自定义事件
directives: {
// 自定义下拉框下拉到底事件
'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 - this.scrollTop <= this.clientHeight;
if (condition) {
binding.value();
}
});
}
}
},
data(){
orgIdList:[],
isShowLoadMore:true,
v:{
pageNo: 1, // 当前页
pageSize: 10, // 页大小
orgName: '', // 组织名称
}
}
created: function () {
this.getOrgIdList();
},
getOrgByName(val){
this.isShowLoadMore = true;
this.orgIdList = [];
this.v.pageNo = 1;
this.v.orgName = val
t.ajax('/***/getList', this.v ,function(res) {
res.data.forEach(item => {
this.orgIdList.push({
value:item.id,
label:item.orgName
})
})
if(res.pageCount <= this.v.pageNo){
this.isShowLoadMore = false;
return;
}
}.bind(this), { msg: null });
},
selectLoadMoreSnInfo() {
if (this.isShowLoadMore) {
this.isShowLoadMore = false;
this.v.pageNo++;
sa.ajax(
"/AfOrg/getList",
this.v,
function (res) {
res.data.forEach((item) => {
this.orgIdList.push({
value: item.id,
label: item.orgName,
});
});
if(res.pageCount <= this.v.pageNo){
this.isShowLoadMore = false;
return;
}
this.isShowLoadMore = true;
}.bind(this)
);
}
},
getOrgIdList(){
t.ajax('/***/getList',this.v, function(res) {
res.data.forEach(item => {
this.orgIdList.push({
value:item.id,
label:item.orgName
})
})
}.bind(this), { msg: null });
},