el-transffer大数据量页面卡顿优化

Element transfer 组件数据量大卡顿优化 && 添加虚拟滚动,

几万以内的数据量不会卡顿，用法和element的el-transfer完全一样

 

安装

?

1	npm install el-virtual-transfer --save

使用

?

1 2 3 4 5 6 7

import ElTransferVirtual from 'element-transfer-virtual';   1、组件内注册一下     components: {         ElTransferVirtual     } 2、直接使用 Vue.use(ElementTransferVirtualScroll);

　　

参考链接

1）https://github.com/GreenHandLittleWhite/blog/issues/15
2）https://github.com/GreenHandLittleWhite/blog/tree/master/el-virtual-transfer
3）https://github.com/raintoway/element/tree/sum

其他可参考项

1）Element-UI的transfer穿梭框组件数据量大解决方案
2）https://github.com/ElemeFE/element/pull/20282
3）https://github.com/ElemeFE/element/issues/2028
4）vue-element-bigdata-table

注：此参考方案亲测为前端优化，同时也要解决数据源数据的获取问题

后端上：根据Key的查找Dictionary、HashTable的效率是高于 List 的， 但是遍历的话则List效率更好。