太久没记录了~简单整理下前段时间的优化
后端返回这个下拉列表接口成千条,渲染太卡了!!
优化思路:
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条即可。