当前位置：首页 > news >正文

vue2+element-ui 实现下拉框滚动加载

news 2025/7/14 23:29:58

一、自定义滚动指令。

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
},
typeTotal: 0,
selectLoading: false,
};
},
methods: {
// 获取后端数据
getAdGroupList() {
this.selectLoading = true

const params = {

page: this.adGroupQuery.currentPage,

pageSize: this.adGroupQuery.pageSize,

param: {

adGroup: this.adGroupQuery.adGroup

}

       }
getAdGroupList(params).then(
response => {
this.selectLoading = false
this.adGroupList = [...this.adGroupList, ...response.result];
this.typeTotal = response.count
}
);
},

//下拉框搜索方法
remoteMethod(query) {
this.adGroupQuery.adGroup= query
this.adGroupQuery.pageNum = 1
this.adGroupList= []
this.getAdGroupList()
},

//滚动加载
loadmore() {
if (this.typeTotal > this.adGroupList.length) {
this.adGroupQuery.pageNum++;
this.getAdGroupList();
}
}