elementUI的select下拉框如何下拉加载数据？

前言

相信大家都遇到过一个问题，select下拉选项数据特别多，要设置为分页，那么前端如何弄成下拉加载数据呢？来看看我是怎么弄的吧。

先来看看效果

template代码

<el-select v-model="formDataModel[item.key]":placeholder="'请选择' + item.label"filterable remote clearable:remote-method="remoteMethod"@clear="handleClear"@blur="handleBlur"><divclass="options"v-infinite-scroll="load":infinite-scroll-disabled="disabled"v-loading="isLoading"><el-option v-for="(item, index) in options":key="index":label="item.name":value="`${item.name}-${item.id}`"></el-option><pclass="load-text"v-if="loading">加载中...</p><pclass="load-text"v-if="noMore">没有更多了</p></div></el-select>

js代码

// 弹框组件是否显示@Prop({type:Boolean,default:false})isShow!:boolean;@Watch('isShow',{immediate:true})handleShowChange(val:boolean){if(val){this.keyword='';this.pageIndex=1;this.getOptions();}}// 清空选项publichandleClear(){this.remoteMethod('');}// 处理失去焦点publichandleBlur(){setTimeout(()=>{if(!this.formDataRef.formDataModel.VBIFieldName){this.remoteMethod('');}},500);}//#region 下拉加载开始publicpageIndex=1;publicoptions:any[]=[];publicloading=false;// 总数publictotal=0;getnoMore(){returnthis.options.length>=this.total;}getdisabled(){returnthis.loading||this.noMore;}publicasyncload(){this.pageIndex+=1;this.getVBIFieldNameOptions();}//#endregion 下拉加载结束publickeyword='';publicisLoading=false;//获取选项publicasyncgetOptions(){if(this.pageIndex===1){// 搜索loadingthis.isLoading=true;}else{// 下拉加载loadingthis.loading=true;}try{letfetchApi:any;letparamsData={pageIndex:this.pageIndex,pageSize:10,name:this.keyword};const{data:{data:{records,total}}}=awaitfetchApi(paramsData);letlist=records??[];if(this.pageIndex===1){this.options=list;}else{this.options=[...this.options,...list];}this.total=total;}finally{if(this.pageIndex===1){// 搜索loadingthis.isLoading=false;}else{// 下拉加载loadingthis.loading=false;}}}// 根据输入框的值远程查询publicasyncremoteMethod(query:string){this.pageIndex=1;this.keyword=query;this.getVBIFieldNameOptions();}

css代码

.options{.load-text{margin:0;text-align:center;color:#999;font-size:12px;}}

结语

大家可以参考一下实现逻辑，代码可能不能直接使用。

关注我，不迷路。
不定时分享前端相关问题以及解决方案。
希望能帮助每个在开发类似功能的小伙伴。