太久没记录了~简单整理下前段时间的优化

后端返回这个下拉列表接口成千条,渲染太卡了!!

优化思路:
1)每次打开下拉列表弹窗请求数据,截取初始渲染数据量(比如100条)
2)当滚动条滑动触底再次渲染100条,以此类推直至渲染完全部数据

在这里插入图片描述
使用aip:
dropdownVisibleChange
在这里插入图片描述
getApiOption方法片段截取:
使用dataSourceList表示渲染数据
并保存原始数据allDataSourceList,一定要保存!搜索有用!

ps: 我的前端表单是用动态表单做的,所以复杂一些,渲染数据放到obj里面。常规使用this.list渲染应该就行了,参考思路即可!
在这里插入图片描述
popupScoll

鼠标滚动到底部触发加载数据事件

在这里插入图片描述在这里区分搜索条件下的加载和全部数据加载;
因为数据个数不是100的整数倍,所以要注意计算一下
在这里插入图片描述
搜索方法:
注意处理数据考虑情况:
1.搜索数据正好在前100条
2.搜索数据在100条后面的话需要从原始数据中搜索
在这里插入图片描述
最后注意编辑时无法匹配数据回显问题:
如果选中的数据在100条以后,需要把数据放到前面来,使用unshift放到在第一位,注意要去除100条后面这条数据,避免重复!
这里直接放前面就行,单选就会渲染101条,如果是多选x个也同样处理,全部放到前面选中匹配,渲染100+x条即可。
在这里插入图片描述

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐