企业官网建设流程全解析

做暧小视频xo网站,公司企业邮箱怎么登录,wordpress设置网址错,深圳营销网站建设公司前言 相信大家都遇到过一个问题#xff0c;select下拉选项数据特别多#xff0c;要设置为分页#xff0c;那么前端如何弄成下拉加载数据呢#xff1f;来看看我是怎么弄的吧。 先来看看效果template代码 el-selectv-modelformDataModel[item.key]:placehold…前言相信大家都遇到过一个问题select下拉选项数据特别多要设置为分页那么前端如何弄成下拉加载数据呢来看看我是怎么弄的吧。先来看看效果template代码el-select v-modelformDataModel[item.key]:placeholder请选择 item.labelfilterable remote clearable:remote-methodremoteMethodclearhandleClearblurhandleBlurdivclassoptionsv-infinite-scrollload:infinite-scroll-disableddisabledv-loadingisLoadingel-option v-for(item, index) in options:keyindex:labelitem.name:value${item.name}-${item.id}/el-optionpclassload-textv-ifloading加载中.../ppclassload-textv-ifnoMore没有更多了/p/div/el-selectjs代码// 弹框组件是否显示Prop({type:Boolean,default:false})isShow!:boolean;Watch(isShow,{immediate:true})handleShowChange(val:boolean){if(val){this.keyword;this.pageIndex1;this.getOptions();}}// 清空选项publichandleClear(){this.remoteMethod();}// 处理失去焦点publichandleBlur(){setTimeout((){if(!this.formDataRef.formDataModel.VBIFieldName){this.remoteMethod();}},500);}//#region 下拉加载开始publicpageIndex1;publicoptions:any[][];publicloadingfalse;// 总数publictotal0;getnoMore(){returnthis.options.lengththis.total;}getdisabled(){returnthis.loading||this.noMore;}publicasyncload(){this.pageIndex1;this.getVBIFieldNameOptions();}//#endregion 下拉加载结束publickeyword;publicisLoadingfalse;//获取选项publicasyncgetOptions(){if(this.pageIndex1){// 搜索loadingthis.isLoadingtrue;}else{// 下拉加载loadingthis.loadingtrue;}try{letfetchApi:any;letparamsData{pageIndex:this.pageIndex,pageSize:10,name:this.keyword};const{data:{data:{records,total}}}awaitfetchApi(paramsData);letlistrecords??[];if(this.pageIndex1){this.optionslist;}else{this.options[...this.options,...list];}this.totaltotal;}finally{if(this.pageIndex1){// 搜索loadingthis.isLoadingfalse;}else{// 下拉加载loadingthis.loadingfalse;}}}// 根据输入框的值远程查询publicasyncremoteMethod(query:string){this.pageIndex1;this.keywordquery;this.getVBIFieldNameOptions();}css代码.options{.load-text{margin:0;text-align:center;color:#999;font-size:12px;}}结语大家可以参考一下实现逻辑代码可能不能直接使用。关注我不迷路。不定时分享前端相关问题以及解决方案。希望能帮助每个在开发类似功能的小伙伴。