免费个人网站服务器 html重庆公路工程建设信息管理系统

免费个人网站服务器 html,重庆公路工程建设信息管理系统,新网站建设市场,网站logo尺寸一般多大前言 相信大家都遇到过一个问题#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;}}结语大家可以参考一下实现逻辑代码可能不能直接使用。关注我不迷路。不定时分享前端相关问题以及解决方案。希望能帮助每个在开发类似功能的小伙伴。