一、自定义滚动指令。
Vue.directive('el-select-loadmore', {
bind(el, binding) {
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
SELECTWRAP_DOM.addEventListener('scroll', function () {
/**
* scrollHeight 获取元素内容高度
* scrollTop 获取或者设置元素的偏移值，常用于计算滚动条的位置，当一个元素的容器没有产生垂直方向的滚动条，那它的scrollTop值默认为0
* clientHeight 获取元素的可见高度
* 如果元素滚动到底，下面的等式返回true,没有则返回false
**/
const condition = (this.scrollHeight - this.scrollTop) <= (this.clientHeight + 10);
if (condition) {
binding.value();
}
})
}
});
二、绑定方法。
data() {
return {
adGroupList: [],
adGroupQuery: {
pageNum: 1,
pageSize: 10
},
adGroupTotal: 0,
selectLoading: false,
};
},
methods: {
// 获取后端数据
getAdGroupList() {
this.selectLoading = true
const params = {
page: this.adGroupQuery.pageNum,
pageSize: this.adGroupQuery.pageSize,
param: {
adGroup: this.searchForm.adGroup
}
}
this.$api.getADGroupList(params).then(
response => {
this.selectLoading = false
this.adGroupList = [...this.adGroupList, ...response.result];
this.adGroupTotal = response.count
}
);
},
//下拉框搜索方法
remoteMethod(query) {
this.searchForm.adGroup= query
this.adGroupQuery.pageNum = 1
this.adGroupList= []
this.getADGroupList()
},
//滚动加载
loadmore() {
if (this.adGroupTotal > this.adGroupList.length) {
this.adGroupQuery.pageNum++;
this.getADGroupList();
}
}
},
三、组件绑定属性。
<el-select
v-model="searchForm.adGroup"
v-el-select-loadmore="loadmore"
placeholder="请输入AD组查询"
filterable
remote
clearable
:remote-method="remoteMethod"
style="width:100%">
<el-option v-for="(item, index) in adGroupList" :key="index" :label="item.name" :value="item.id">
</el-option>
</el-select>
