淮南市重点工程建设管理局网站,专业建站工作室,制作网址怎么收费,福州网红打卡景点需求#xff1a;
由于项目下拉框数据过多#xff0c;一次性加载完#xff0c;会有性能问题#xff0c;于是希望可以增加分页加载更多功能。 实现效果#xff1a;
如上图#xff1a;点击“点击加载更多”按钮#xff0c;实现分页加载下一页#xff0c;直到最后一页
由于项目下拉框数据过多一次性加载完会有性能问题于是希望可以增加分页加载更多功能。 实现效果
如上图点击“点击加载更多”按钮实现分页加载下一页直到最后一页提示“已经到底啦~” 实现代码:
html
el-selectclassinput-searchv-modelproNameremote:remote-methodgetOptionListchangechangePro:loadingsloadingsizesmallclearablefilterableplaceholder请选择所属平台/App
el-optionv-foritem in selectList:keyitem.projectId:labelitem.projectName:valueitem.projectName/el-optiontemplateel-row typeflex justifycenterpclickloadMoreProstylefont-size: 12px;color: #1368ff;cursor: pointer;点击加载更多/ppv-showleft.totalPage 1 left.pageNum left.totalPagestylecolor: #ccc; font-size: 12px已经到底啦~/p/el-row/template
/el-selectjs核心方法:
// 触发下拉框加载更多
loadMorePro() {this.left.pageNum;this.sloading true;this.searchData {pageNo: this.left.pageNum,pageSize: this.left.pageSize,projectName: this.left.projectName || };listProject(this.searchData).then(res {if (res.data res.data.records) {// 加载的新1页数据与之前加载的数据合并this.selectList [...this.selectList, ...res.data.records];// 总页数控制是否显示加载更多按钮如果后端接口未返回可使用total总条数计算也可this.left.totalPage res.data.pages || 1; }this.sloading false;}).finally(() {this.sloading false;});},// 监听下拉框切换changePro(name) {this.queryType 1;this.pageNum 1;this.left.pageNum 1; // 需要重置this.left.projectName name;this.getTableData();this.getOptionList();},// 获取下拉框数据getOptionList(name) {this.selectList []; // 需要清空this.sloading true;this.searchData {pageNo: this.left.pageNum,pageSize: this.left.pageSize,projectName: name || };listProject(this.searchData).then(res {this.sloading false;this.selectList res.data.records || [];this.left.totalPage res.data.pages || 1;}).finally(() {this.sloading false;});},以上因为我的场景还需要远程搜索所以我把remote方法也贴上了不需要的可自行删减 希望记录的问题能帮助到你 end~
