el-tree组件展示节点过多时造成页面卡顿、奔溃的解决办法

解决el-tree组件展示节点过多时造成页面卡顿、奔溃

前几天测试提了个BUG，文件列表展示5w个文件页面会卡顿甚至奔溃。
项目用的是vue+element-ui框架，我是使用el-tree进行渲染文件列表的。
参考网上使用virtual-scroll-list插件与el-tree源码写成一个新组件。virtual-scroll-list可以只渲染页面呈现部分的节点，这样就不会造成卡顿了，源el-tree是直接将5w个节点直接渲染到页面，导致页面奔溃。
这是使用virtual-scroll-list插件与el-tree源码结合后的组件：github组件下载 、gitee组件下载
组件使用方法（传入的属性）与el-tree一致，可根据自己的业务需求更改，我做的需求只是进行文件导出。
组件使用示例：

      
        
        
          
        
        {{ data.fname }}
      
    

组件引入：

效果图：

more文件下面有5w个文件，实际页面渲染50个文件，根据组件传入的keeps展示文件数，默认30个；
注意：
1.搜索只能搜到已渲染的节点，可以自己做递归搜索源数据，不过这样的话数据一多会很卡，建议后端写个搜索api
2.该组件的父容器一定要确定高度，不能以整个body作为父容器，这样有可能滚动时渲染不出下面的文件。

补充：
我使用的完整代码