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

自定义滑动到底部触发指令，elementUI实现分页下拉框

news 2025/8/12 10:52:39

在 main.js 中添加

// 自定义滑动到底部指令
Vue.directive('selectLoadMore', {bind(el, binding) {// 获取element-ui定义好的scroll盒子const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')SELECTWRAP_DOM.addEventListener('scroll', function () {if (this.scrollHeight - this.scrollTop < this.clientHeight + 1) {binding.value()}})},
})

使用

<el-selectclass="width-max"v-model="formValues.hpNumberArr"clearablefilterablemultiplereserve-keywordremotev-selectLoadMore="selectLoadMore":remote-method="remoteMethod"placeholder="请选择表型匹配"
><el-optionv-for="user in phenotypeList":key="user.id":label="user.label":value="user.value"></el-option>
</el-select>

// 下拉加载更多
selectLoadMore() {this.phenotypeSearch.pageNum = this.phenotypeSearch.pageNum + 1if (this.phenotypeList.length >= this.phenotypeSearch.totalPage) returnthis.readAllUsers() // 请求接口
},
// 远程搜索
remoteMethod(query, callback) {this.loading = truethis.phenotypeSearch.cn = querythis.phenotypeSearch.pageNum = 1this.phenotypeList = []callback && callback()setTimeout(() => {this.loading = falsethis.readAllUsers() // 请求接口}, 200)
},
// 获取数据
readAllUsers() {let params = {pageNum: this.phenotypeSearch.pageNum,pageSize: this.phenotypeSearch.pageSize,cn: this.phenotypeSearch.cn,}findListByConditionFun(params).then((res) => {this.phenotypeSearch.totalPage = res.data.totalRecordsthis.phenotypeList = this.phenotypeList.concat(res.data.data.map((i) => {return {id: i.id,value: i.hpNumber,label: i.cn,}}))})
},