优化ant vue design 中a-select选择数据过多导致渲染卡顿问题
·
太久没记录了~简单整理下前段时间的优化
后端返回这个下拉列表接口成千条,渲染太卡了!!
优化思路:
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条即可。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)