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

一、自定义滚动指令。

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();

}

}

},

三、组件绑定属性。

<el-select

v-model="form.materialId"

v-el-select-loadmore="loadmore"

placeholder="请输入AD组查询"

filterable

remote

clearable

:remote-method="remoteMethod"

style="width:100%">

<el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.id">

</el-option>

</el-select>

相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子2 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘4 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie6 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js