深圳网站建设流程,合肥建站软件,河池个人网站开发公司,wordpress指定会员可见vue elementui的select组件实现滑到底部分页请求后端接口 1.实现效果2.实现原理 1.实现效果
老规矩#xff0c;直接上最后的实现效果
2.实现原理
直接上代码 el-form-item classdiagmosisItem label诊断 v-scrollhandleScroll直接上最后的实现效果
2.实现原理
直接上代码 el-form-item classdiagmosisItem label诊断 v-scrollhandleScrollel-selectsizesmallremotefilterableclearable:loadinggetAllDiagnosisLoadingv-modelqueryObj.diagnosisDesc:remote-methodhandleRemoteDiseaseclearhandleClearDiseaseel-optionv-foritem in allDiagnosisList:keyitem.valueId:labelitem.valueNo item.valueDesc:valueitem.valueDesc/el-option/el-select/el-form-item
//js
//mothodshandleScroll() {if(!this.scrollStop) {this.diagnosisQuery.pageNothis.getAllDiagnosis(this.diagnosisQueryText, join)}},// 远程搜索诊断async handleRemoteDisease(keyword ) {this.diagnosisQueryText keywordthis.getAllDiagnosis(keyword)},// 清除选中诊断handleClearDisease() {this.getAllDiagnosis(, clear)},//诊断列表async getAllDiagnosis(val , type search) {try {this.getAllDiagnosisLoading truethis.scrollStop falselet res nullif(this.isHaveDiagnoseFlag) {if(type search) {this.diagnosisQuery {pageNo:0,pageSize:100}res await this.reqGetAllDiagnosis({keyword:val,pageNo:0,pageSize:100})}else if(type join) {res await this.reqGetAllDiagnosis({keyword:val,...this.diagnosisQuery})}else{this.allDiagnosisList this.allDiagnosisListthis.getAllDiagnosisLoading false}}if (res res.success) {if(type search) {this.allDiagnosisList res.data}else{if(res.data.length 0) {this.scrollStop true}this.allDiagnosisList [...res.data, ...this.allDiagnosisList]}this.getAllDiagnosisLoading false}} catch (error) {this.getAllDiagnosisLoading false}},
//主要看这里directives:{scroll:{bind(el, binding) {const SELECTNRAP_DON el.querySelector(.el-select-dropdown .el-select-dropdown__wrap)SELECTNRAP_DON.addEventListener( scroll, function() {console.log(this.scrollHeight - this.scrollTop, this.clientHeight)const CONDITION this.scrollHeight - this.scrollTop this.clientHeightif(CONDITION) {binding.value()}})}}},scrollStop主要是用来诊断select移到底部不再请求数据默认为false。思路反正就是到底了触发函数处理pageNo请求后端接口
